<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"
		"http://www.w3.org/TR/1998/REC-html40-19980424/strict.dtd">

<html lang=en>
<head><meta content="text/html; charset=utf-8" http-equiv=Content-Type>
	<meta content="text/css" http-equiv=Content-Style-Type>
	<meta content=en http-equiv=Content-Language>

	<title>CSS Color Module Level 3</title>

	<link href="../css/w3_color.css" rel=stylesheet type="text/css">

	<style type="text/css">
		.example pre {
			background-color: #d5d5d5;
			margin: 1em 1cm;
			padding: 0 0.3cm;
		}

		pre { text-align:left }
		pre.code { font-family: monospace }

		table.colortable td {text-align:center }
		table.colortable td.c { text-transform:uppercase }
		table.colortable td:first-child, table.colortable td:first-child+td { border:1px solid black }
		table.colortable th {text-align:center; background:black; color:white }

		table.tprofile th.title {background:gray; color:white}
		table.tprofile th { width:29%;padding:2px }
		table.tprofile td { width:71%;padding:2px }

		table.hslexample { background: #808080; padding:1em; margin:0; float:left; }
		table.hslexample td,table.hslexample th { font-size:smaller;width:3em }

		.toc,.subtoc ul,.subtoc ol { list-style-type: none }

		.profile { margin: 1cm }

		.editorNote { color: red; font-style: italic }

		h1,h2,h3,h4,h5,h6 { clear:both }

		h1 {font-size:200%}
		h2 {font-size:170%}
		h3 {font-size:150%}
		h4 {font-size:130%}
		h5 {font-size:120%}
		h6 {font-size:110%}
	</style>
	<link href="http://www.w3.org/StyleSheets/TR/W3C-REC" rel=stylesheet
		  type="text/css">
	<!--
  <script src='http://test.csswg.org/harness/annotate.js#CSS3-COLOR_DEV' type='text/javascript' defer></script>
  -->
	<!--
  <script src='http://www.w3c-test.org/css/harness/annotate.js#CSS3-COLOR_DEV' type='text/javascript' defer></script>
  -->


<body>
<div class=head> <!--begin-logo-->
	<p><a href="http://www.w3.org/"><img alt=W3C height=48
										 src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->

	<h1>CSS Color Module Level 3</h1>

	<h2 class="no-num no-toc" id=longstatus-date>W3C Recommendation 07 June
		2011</h2>

	<dl>
		<dt>This version:</dt>
		<dd><a href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a></dd>
		<!-- editors draft
    <dd><a
     href="http://dev.w3.org/csswg/css3-color/">http://dev.w3.org/csswg/css3-color/</a>
     </dd>
     -->

		<dt>Latest version:

		<dd><a
				href="http://www.w3.org/TR/css3-color">http://www.w3.org/TR/css3-color</a>

		<dt>Previous version:

		<dd><a
				href="http://www.w3.org/TR/2010/PR-css3-color-20101028">http://www.w3.org/TR/2010/PR-css3-color-20101028</a>

		<dt>Editors:

		<dd class=vcard><span class=fn lang=tr>Tantek Çelik</span> (<a
				class="company role url" href="http://tantek.com/">invited expert</a>,
			and before at <a href="http://www.microsoft.com/">Microsoft
				Corporation</a>) &lt;<a class=email
										href="mailto:tantek@cs.stanford.edu">tantek@cs.stanford.edu</a>&gt;

		<dd class=vcard><span class=fn>Chris Lilley</span> (<span class="company
     org vcard"><a class="fn org url"
				   href="http://www.w3.org/">W3C</a></span>) &lt;<a class=email
																	href="mailto:chris@w3.org">chris@w3.org</a>&gt;

		<dd class=vcard><span class="fn n"><abbr class=given-name>L.</abbr> <span
				class=additional-name>David</span> <span
				class=family-name>Baron</span></span> (<span class="org company
     vcard"><a class="fn org url" href="http://www.mozilla.com/">Mozilla
			Corporation</a></span>) &lt;<a class=email
										   href="mailto:dbaron@dbaron.org">dbaron@dbaron.org</a>&gt;

		<dt>Additional Authors:

		<dd class=vcard><span class=fn>Steven Pemberton</span> (<span class="org
     company vcard"><a class="fn org url"
					   href="http://www.cwi.nl/">CWI</a></span>) &lt;<a class=email
																		href="mailto:steven.pemberton@cwi.nl">steven.pemberton@cwi.nl</a>&gt;

		<dd class=vcard><span class=fn>Brad Pettit</span> (<span class="org
     company vcard"><a class="fn org url"
					   href="http://www.microsoft.com/">Microsoft Corporation</a></span>)
			&lt;<a class=email
				   href="mailto:bradp@microsoft.com">bradp@microsoft.com</a>&gt;
	</dl>

	<p>Please refer to the <a href="http://www.w3.org/Style/2011/REC-css3-color-20110607-errata.html"><strong>errata</strong></a> for this document, which may include some normative corrections.</p>

	<p>See also <a href="http://www.w3.org/2003/03/Translations/byTechnology?technology=css3-color"> <strong>translations</strong></a>.</p>

	<!--begin-copyright-->
	<p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> &copy; 2011 <a href="http://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a><sup>&reg;</sup>  (<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>  and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p>
	<!--end-copyright-->
	<hr title="Separator for header">
</div>

<h2 class="no-num no-toc" id=abstract>Abstract</h2>

<p>CSS (Cascading Style Sheets) is a language for describing the rendering
	of HTML and XML documents on screen, on paper, in speech, etc. It uses
	color-related properties and values to color the text, backgrounds,
	borders, and other parts of elements in a document. This specification
	describes color values and properties for foreground color and group
	opacity. These include properties and values from CSS level&nbsp;2 and new
	values.

<h2 id="status">Status of this document</h2>

<p><em>This section describes the status of this document at the
	time of its publication. Other documents may supersede this
	document. A list of current W3C publications and the latest
	revision of this technical report can be found in the
	<a href="http://www.w3.org/TR/">W3C technical reports index</a> at
	http://www.w3.org/TR/.</em></p>

<p>The (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
	mailing list <a href="mailto:www-style@w3.org?Subject=%5Bcss3-color%5D%20PUT%20SUBJECT%20HERE">
		www-style@w3.org</a> (see <a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
	discussion of this specification. When sending e-mail, please put the text
	“css3-color” in the subject, preferably like this:
	“[css3-color] <em>…summary of comment…</em>”  </p>

<p>This document was produced by the <a href="/Style/CSS/members">CSS
	Working Group</a> (part of the <a href="/Style/">Style Activity</a>).


<p>A separate <a
		href="http://www.w3.org/Style/CSS/Test/CSS3/Color/20081014/reports/CR-ImpReport.html">
	implementation report</a> contains a test suite and shows that each test in the test suite was passed by at least two independent implementations.

<p>The <a href="http://dev.w3.org/csswg/css3-color/issues-lc-2008.html
">list of comments on the most recent Last Call
	draft</a> explains the changes that were made since that draft. Comments
	received during the Candidate Recommendation period (for the <a
			href="http://www.w3.org/TR/2003/CR-css3-color-20030514/">14 May 2003
		draft</a>) and how they were addressed in this draft can be found in the
	<a
			href="http://lists.w3.org/Archives/Public/www-archive/2008Jun/att-0045/disposition-2.html">disposition
		of comments</a>. Comments received during the Last Call period (for the <a
			href="http://www.w3.org/TR/2003/WD-css3-color-20030214/">14 February 2003
		draft</a>) and how they were addressed can be found in the <a
			href="http://www.w3.org/Style/2003/css3-color-comments.html">disposition
		of comments.</a></p>



<p>A complete <a href="#changes" >list of changes</a>
	to this document is available.
</p>

<p>This document has been reviewed by W3C Members, by software developers, and by other W3C groups and interested parties, and is endorsed by the Director as a W3C Recommendation. It is a stable document and may be used as reference material or cited from another document. W3C's role in making the Recommendation is to draw attention to the specification and to promote its widespread deployment. This enhances the functionality and interoperability of the Web.</p>


<p>This document was produced by a group operating under the <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5
	February 2004 W3C Patent Policy</a>.
	W3C maintains a <a rel="disclosure" href="http://www.w3.org/2004/01/pp-impl/32061/status">public list of any
		patent disclosures</a> made in connection with the
	deliverables of the group; that page also includes
	instructions for disclosing a patent.

	An individual who has actual knowledge of a patent which the
	individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a> must disclose the
	information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</a>.</p>


<h2 class="no-num no-toc" id=contents>Table of Contents</h2>
<!--begin-toc-->

<ul class=toc>
	<li><a href="#introduction"><span class=secno>1. </span>Introduction</a>

	<li><a href="#dependencies"><span class=secno>2. </span>Dependencies</a>

	<li><a href="#color"><span class=secno>3. </span>Color properties</a>
		<ul class=toc>
			<li><a href="#foreground"><span class=secno>3.1. </span>Foreground
				color: the &lsquo;<code class=property>color</code>&rsquo; property</a>


			<li><a href="#transparency"><span class=secno>3.2. </span>Transparency:
				the &lsquo;<code class=property>opacity</code>&rsquo; property</a>
		</ul>

	<li><a href="#colorunits"><span class=secno>4. </span>Color units</a>
		<ul class=toc>
			<li><a href="#html4"><span class=secno>4.1. </span>Basic color
				keywords</a>

			<li><a href="#numerical"><span class=secno>4.2. </span>Numerical color
				values</a>
				<ul class=toc>
					<li><a href="#rgb-color"><span class=secno>4.2.1. </span>RGB color
						values</a>

					<li><a href="#rgba-color"><span class=secno>4.2.2. </span>RGBA color
						values</a>

					<li><a href="#transparent"><span class=secno>4.2.3.
        </span>&lsquo;<code class=css>transparent</code>&rsquo; color
						keyword</a>

					<li><a href="#hsl-color"><span class=secno>4.2.4. </span>HSL color
						values</a>
						<ul class=toc>
							<li><a href="#hsl-examples"><span class=secno>4.2.4.1. </span>HSL
								examples</a>
						</ul>

					<li><a href="#hsla-color"><span class=secno>4.2.5. </span>HSLA color
						values</a>
				</ul>

			<li><a href="#svg-color"><span class=secno>4.3. </span>Extended color
				keywords</a>

			<li><a href="#currentcolor"><span class=secno>4.4. </span>&lsquo;<code
					class=css>currentColor</code>&rsquo; color keyword</a>

			<li><a href="#css-system"><span class=secno>4.5. </span>CSS system
				colors</a>
				<ul class=toc>
					<li><a href="#css2-system"><span class=secno>4.5.1. </span>CSS2 system
						colors</a>
				</ul>

			<li><a href="#notes"><span class=secno>4.6. </span>Notes on using
				colors</a>
		</ul>

	<li><a href="#alpha"><span class=secno>5. </span>Simple alpha
		compositing</a>

	<li><a href="#sample"><span class=secno>6. </span>Sample style sheet for
		(X)HTML</a>

	<li><a href="#profiles"><span class=secno>7. </span>Profiles</a>

	<li><a href="#testsuite"><span class=secno>8. </span>Test suite</a>

	<li><a href="#dropped"><span class=secno>9. </span>Call for
		Implementations of dropped features</a>

	<li><a href="#acknowledgments"><span class=secno>10.
    </span>Acknowledgments</a>

	<li><a href="#changes"><span class=secno>11. </span>Changes</a>

	<li><a href="#references"><span class=secno>12. </span>References</a>
		<ul class=toc>
			<li><a href="#normative"><span class=secno>12.1. </span>Normative</a>

			<li><a href="#informative"><span class=secno>12.2.
      </span>Informative</a>
		</ul>

	<li class=no-num><a href="#index">Index</a>

	<li class=no-num><a href="#property">Property index</a>
</ul>
<!--end-toc-->

<hr>

<h2 id=introduction><span class=secno>1. </span>Introduction</h2>

<p>CSS beyond level 2 is a set of modules, divided up to allow the
	specifications to develop incrementally, along with their implementations.
	This specification is one of those modules.

<p> This module describes CSS properties which allow authors to specify the
	foreground color and opacity of an element. This module also describes in
	detail the CSS &lt;color&gt; value type.

<p>It not only defines the color-related properties and values that already
	exist in <a href="http://www.w3.org/TR/CSS1">CSS1</a> and <a
			href="http://www.w3.org/TR/CSS2/">CSS2</a>, but also defines new
	properties and values.

<p>The Working Group doesn't expect that all implementations of CSS3 will
	implement all properties or values. Instead, there will probably be a
	small number of variants of CSS3, so-called "profiles". For example, it
	may be that only the profile for 32-bit color user agents will include all
	of the proposed color-related properties and values.

<p>The specification is the result of the merging of relevant parts of the
	following Recommendations and Working Drafts, and the addition of some new
	features.

<ul>
	<li>HTML 4.01 <a href="#HTML401"
					 rel=biblioentry>[HTML401]<!--{{HTML401}}--></a>

	<li>CSS 2.0 <a href="#CSS2" rel=biblioentry>[CSS2]<!--{{CSS2}}--></a>

	<li>SVG 1.0 <a href="#SVG10" rel=biblioentry>[SVG10]<!--{{SVG10}}--></a>

	<li>User Interface for CSS3 (16 February 2000) <a href="#CSS3UI"
													  rel=biblioentry>[CSS3UI]<!--{{CSS3UI}}--></a>
</ul>

<h2 id=dependencies><span class=secno>2. </span>Dependencies</h2>

<p>Additional terminology is defined in the <a
		href="http://www.w3.org/TR/CSS21/conform.html#defs">Definitions</a>
	section of <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
	Examples of document source code and fragments are given in XML <a
			href="#XML10" rel=biblioentry>[XML10]<!--{{XML10}}--></a> or HTML <a
			href="#HTML401" rel=biblioentry>[HTML401]<!--{{HTML401}}--></a> syntax.

<h2 id=color><span class=secno>3. </span>Color properties</h2>

<h3 id=foreground><span class=secno>3.1. </span>Foreground color: the
	&lsquo;<a href="#color0"><code class=property>color</code></a>&rsquo;
	property</h3>

<table class=propdef>
	<tbody>
	<tr>
		<td><em>Name:</em>

		<td><dfn id=color0>color</dfn>

	<tr>
		<td><em>Value:</em>

		<td>&lt;color&gt; | inherit

	<tr>
		<td><em>Initial:</em>

		<td>depends on user agent

	<tr>
		<td><em>Applies&nbsp;to:</em>

		<td>all elements

	<tr>
		<td><em>Inherited:</em>

		<td>yes

	<tr>
		<td><em>Percentages:</em>

		<td>N/A

	<tr>
		<td><em>Media:</em>

		<td>visual

	<tr>
		<td><em>Computed value:</em>

		<td>
			<ul>
				<li>The computed value for basic color keywords, RGB hex values and
					extended color keywords is the equivalent triplet of numerical RGB
					values, e.g. <span class=example>six digit hex value or rgb(...)
        functional value</span>, with an alpha value of 1.

				<li>The computed value of the keyword &lsquo;<a
						href="#transparent-def"><code class=css><span class=index-inst
																	  id=transparent0>transparent</span></code></a>&rsquo; is the
					quadruplet of all zero numerical RGBA values, e.g. <span
							class=example>rgba(0,0,0,0)</span>.

				<li>See the definition of the &lsquo;<code class=css><a
						class=index-inst href="#currentcolor"
						id=currentcolor0>currentColor</a></code>&rsquo; for how its computed
					value is determined.

				<li>For all other values, the computed value is the specified value.
			</ul>
</table>

<p>This property describes the foreground color of an element's text
	content. In addition it is used to provide a potential indirect value (<a
			class=index-inst href="#currentcolor" id=currentcolor1>currentColor</a>)
	for any <em>other</em> properties that accept color values. If the
	&lsquo;<a href="#currentColor-def"><code class=css><span class=index-inst
															 id=currentcolor2>currentColor</span></code></a>&rsquo; keyword is set on
	the &lsquo;<a href="#color0"><code class=property>color</code></a>&rsquo;
	property itself, it is treated as &lsquo;<code class=css>color:
		inherit</code>&rsquo;.

<p> There are different ways to specify lime green:

<div class=example>
	<p style="display:none">Example(s):</p>

   <pre>
em { color: lime }               /* color keyword */
em { color: rgb(0,255,0) }       /* RGB range 0-255   */
</pre>
</div>

<dl>
	<dt><a class="prop-value index-inst" href="#valuea-def-color"
		   id=ltcolorgt>&lt;color&gt;</a>

	<dd>Color units are defined in a <a href="#colorunits">following</a>
		section.
</dl>

<h3 id=transparency><span class=secno>3.2. </span>Transparency: the
	&lsquo;<a href="#opacity"><code class=property>opacity</code></a>&rsquo;
	property</h3>

<p> Opacity can be thought of as a postprocessing operation. Conceptually,
	after the element (including its descendants) is rendered into an RGBA
	offscreen image, the opacity setting specifies how to blend the offscreen
	rendering into the current composite rendering. See <a
			href="#alpha">simple alpha compositing</a> for details.

<table class=propdef>
	<tbody>
	<tr>
		<td><em>Name:</em>

		<td><dfn id=opacity>opacity</dfn>

	<tr>
		<td><em>Value:</em>

		<td>&lt;alphavalue&gt; | inherit

	<tr>
		<td><em>Initial:</em>

		<td>1

	<tr>
		<td><em>Applies&nbsp;to:</em>

		<td>all elements

	<tr>
		<td><em>Inherited:</em>

		<td>no

	<tr>
		<td><em>Percentages:</em>

		<td>N/A

	<tr>
		<td><em>Media:</em>

		<td>visual

	<tr>
		<td><em>Computed value:</em>

		<td>The same as the specified value after clipping the
			&lt;alphavalue&gt; to the range [0.0,1.0].
</table>

<dl>
	<dt id=alphavaluedt><dfn class=prop-value
							 id=alphavalue-def>&lt;alphavalue&gt;</dfn>

	<dd>Syntactically a &lt;number&gt;. The uniform opacity setting to be
		applied across an entire object. Any values outside the range 0.0 (fully
		transparent) to 1.0 (fully opaque) will be clamped to this range. If the
		object is a container element, then the effect is as if the contents of
		the container element were blended against the current background using a
		mask where the value of each pixel of the mask is &lt;alphavalue&gt;.
</dl>

<p>Since an element with opacity less than 1 is composited from a single
	offscreen image, content outside of it cannot be layered in z-order
	between pieces of content inside of it. For the same reason,
	implementations must create a new stacking context for any element with
	opacity less than 1. If an element with opacity less than 1 is not
	positioned, implementations must paint the layer it creates, within its
	parent stacking context, at the same stacking order that would be used if
	it were a positioned element with &lsquo;<code class=css>z-index:
		0</code>&rsquo; and &lsquo;<code class=css>opacity: 1</code>&rsquo;. If an
	element with opacity less than 1 is positioned, the &lsquo;<code
			class=property>z-index</code>&rsquo; property applies as described in <a
			href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, except that
	&lsquo;<code class=css>auto</code>&rsquo; is treated as &lsquo;<code
			class=css>0</code>&rsquo; since a new stacking context is always created.
	See <a href="http://www.w3.org/TR/CSS21/visuren.html#layers">section
		9.9</a> and <a href="http://www.w3.org/TR/CSS21/zindex.html">Appendix
		E</a> of <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> for
	more information on stacking contexts. The rules in this paragraph do not
	apply to SVG elements, since SVG has its own <a
			href="http://www.w3.org/TR/SVG11/render.html">rendering model</a> (<a
			href="#SVG11" rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>, Chapter 3).

<h2 id=colorunits><span class=secno>4. </span>Color units</h2>

<p>A <dfn class=value-def-color id=valuea-def-color>&lt;color&gt;</dfn> is
	either a keyword or a numerical specification.

<h3 id=html4><span class=secno>4.1. </span>Basic color keywords</h3>

<p>The list of basic color keywords is: aqua, black, blue, fuchsia, gray,
	green, lime, maroon, navy, olive, purple, red, silver, teal, white, and
	yellow. The color names are case-insensitive.

<table class=colortable>
	<caption><b>Color names and <span class=index-inst id=srgbval>sRGB</span>
		values</b><br>
	</caption>

	<tbody>
	<tr>
		<th style="background:black">Named

		<th>Numeric

		<th>Color&nbsp;name

		<th>Hex&nbsp;rgb

		<th>Decimal

	<tr>
		<td class=c style="background:black">&nbsp;

		<td class=c style="background:#000000">&nbsp;

		<td><dfn id=black>black</dfn>

		<td class=c style="background:silver">#000000

		<td class=c style="background:silver">0,0,0

	<tr>
		<td class=c style="background:silver">&nbsp;

		<td class=c style="background:#C0C0C0">&nbsp;

		<td><dfn id=silver>silver</dfn>

		<td class=c style="background:silver">#C0C0C0

		<td class=c style="background:silver">192,192,192

	<tr>
		<td class=c style="background:gray">&nbsp;

		<td class=c style="background:#808080">&nbsp;

		<td><dfn id=gray>gray</dfn>

		<td class=c style="background:silver">#808080

		<td class=c style="background:silver">128,128,128

	<tr>
		<td class=c style="background:white">&nbsp;

		<td class=c style="background:#FFFFFF">&nbsp;

		<td><dfn id=white>white</dfn>

		<td class=c style="background:silver">#FFFFFF

		<td class=c style="background:silver">255,255,255

	<tr>
		<td class=c style="background:maroon">&nbsp;

		<td class=c style="background:#800000">&nbsp;

		<td><dfn id=maroon>maroon</dfn>

		<td class=c style="background:silver">#800000

		<td class=c style="background:silver">128,0,0

	<tr>
		<td class=c style="background:red">&nbsp;

		<td class=c style="background:#FF0000">&nbsp;

		<td><dfn id=red>red</dfn>

		<td class=c style="background:silver">#FF0000

		<td class=c style="background:silver">255,0,0

	<tr>
		<td class=c style="background:purple">&nbsp;

		<td class=c style="background:#800080">&nbsp;

		<td><dfn id=purple>purple</dfn>

		<td class=c style="background:silver">#800080

		<td class=c style="background:silver">128,0,128

	<tr>
		<td class=c style="background:fuchsia">&nbsp;

		<td class=c style="background:#FF00FF">&nbsp;

		<td><dfn id=fuchsia>fuchsia</dfn>

		<td class=c style="background:silver">#FF00FF

		<td class=c style="background:silver">255,0,255

	<tr>
		<td class=c style="background:green">&nbsp;

		<td class=c style="background:#008000">&nbsp;

		<td><dfn id=green>green</dfn>

		<td class=c style="background:silver">#008000

		<td class=c style="background:silver">0,128,0

	<tr>
		<td class=c style="background:lime">&nbsp;

		<td class=c style="background:#00FF00">&nbsp;

		<td><dfn id=lime>lime</dfn>

		<td class=c style="background:silver">#00FF00

		<td class=c style="background:silver">0,255,0

	<tr>
		<td class=c style="background:olive">&nbsp;

		<td class=c style="background:#808000">&nbsp;

		<td><dfn id=olive>olive</dfn>

		<td class=c style="background:silver">#808000

		<td class=c style="background:silver">128,128,0

	<tr>
		<td class=c style="background:yellow">&nbsp;

		<td class=c style="background:#FFFF00">&nbsp;

		<td><dfn id=yellow>yellow</dfn>

		<td class=c style="background:silver">#FFFF00

		<td class=c style="background:silver">255,255,0

	<tr>
		<td class=c style="background:navy">&nbsp;

		<td class=c style="background:#000080">&nbsp;

		<td><dfn id=navy>navy</dfn>

		<td class=c style="background:silver">#000080

		<td class=c style="background:silver">0,0,128

	<tr>
		<td class=c style="background:blue">&nbsp;

		<td class=c style="background:#0000FF">&nbsp;

		<td><dfn id=blue>blue</dfn>

		<td class=c style="background:silver">#0000FF

		<td class=c style="background:silver">0,0,255

	<tr>
		<td class=c style="background:teal">&nbsp;

		<td class=c style="background:#008080">&nbsp;

		<td><dfn id=teal>teal</dfn>

		<td class=c style="background:silver">#008080

		<td class=c style="background:silver">0,128,128

	<tr>
		<td class=c style="background:aqua">&nbsp;

		<td class=c style="background:#00FFFF">&nbsp;

		<td><dfn id=aqua>aqua</dfn>

		<td class=c style="background:silver">#00FFFF

		<td class=c style="background:silver">0,255,255
</table>

<!--
  <table class=colortable></table>
  -->

<div class=example>
	<p style="display:none">Example(s):</p>

   <pre>
body {color: black; background: white }
h1 { color: maroon }
h2 { color: olive }
</pre>
</div>

<h3 id=numerical><span class=secno>4.2. </span>Numerical color values</h3>

<h4 id=rgb-color><span class=secno>4.2.1. </span>RGB color values</h4>

<p>The <span class=index-def id=rgb-def title="rgb()">RGB color
   model</span> is used in numerical color specifications. These examples all
	specify the same color:

<div class=example>
	<p style="display:none">Example(s):</p>

   <pre>
em { color: #f00 }              /* #rgb */
em { color: #ff0000 }           /* #rrggbb */
em { color: rgb(255,0,0) }
em { color: rgb(100%, 0%, 0%) }
</pre>
</div>

<p> The format of an RGB value in hexadecimal notation is a &lsquo;<code
		class=css>#</code>&rsquo; immediately followed by either three or six
	hexadecimal characters. The three-digit RGB notation (<span
			class=index-def id=rgb>#rgb</span>) is converted into six-digit form
	(<span class=index-def id=rrggbb>#rrggbb</span>) by replicating digits,
	not by adding zeros. For example, #fb0 expands to #ffbb00. This ensures
	that white (#ffffff) can be specified with the short notation (#fff) and
	removes any dependencies on the color depth of the display.

<p> The format of an RGB value in the functional notation is &lsquo;<code
		class=css>rgb(</code>&rsquo; followed by a comma-separated list of three
	numerical values (either three integer values or three percentage values)
	followed by &lsquo;<code class=css>)</code>&rsquo;. The integer value 255
	corresponds to 100%, and to F or FF in the hexadecimal notation:
	rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. White space characters are
	allowed around the numerical values.

<p>All RGB colors are specified in the <span class=index-def
											 id="sRGB-def">sRGB</span> color space (see <a href="#SRGB"
																						   rel=biblioentry>[SRGB]<!--{{!SRGB}}--></a>). User agents may vary in the
	fidelity with which they represent these colors, but using sRGB provides
	an unambiguous and objectively measurable definition of what the color
	should be, which can be related to international standards (see <a
			href="#COLORIMETRY"
			rel=biblioentry>[COLORIMETRY]<!--{{!COLORIMETRY}}--></a>).

<p>Values outside the device gamut should be clipped or mapped into the
	gamut when the gamut is known: the red, green, and blue values must be
	changed to fall within the range supported by the device. User agents may
	perform higher quality mapping of colors from one gamut to another. This
	specification does not define precise clipping behavior. For a typical CRT
	monitor, whose device gamut is the same as sRGB, the four rules below are
	equivalent:

<div class=example>
	<p style="display:none">Example(s):</p>

   <pre>
em { color: rgb(255,0,0) }       /* integer range 0 - 255 */
em { color: rgb(300,0,0) }       /* clipped to rgb(255,0,0) */
em { color: rgb(255,-10,0) }     /* clipped to rgb(255,0,0) */
em { color: rgb(110%, 0%, 0%) }  /* clipped to rgb(100%,0%,0%) */
</pre>
</div>

<p>Other devices, such as printers, have different gamuts than sRGB; some
	colors outside the 0..255 sRGB range will be representable (inside the
	device gamut), while other colors inside the 0..255 sRGB range will be
	outside the device gamut and will thus be mapped.

<h4 id=rgba-color><span class=secno>4.2.2. </span>RGBA color values</h4>

<p>The <span class=index-def id=rgba-def title="rgba()">RGB color model is
   extended in this specification to include &ldquo;alpha&rdquo; to allow
   specification of the opacity of a color. See <a href="#alpha">simple alpha
		compositing</a> for details. These examples all specify the same
   color:</span>

<div class=example>
	<p style="display:none">Example(s):</p>

   <pre>
em { color: rgb(255,0,0) }      /* integer range 0 - 255 */
em { color: rgba(255,0,0,1)     /* the same, with explicit opacity of 1 */
em { color: rgb(100%,0%,0%) }   /* float range 0.0% - 100.0% */
em { color: rgba(100%,0%,0%,1) } /* the same, with explicit opacity of 1 */
</pre>
</div>

<p>Unlike RGB values, there is no hexadecimal notation for an RGBA value.

<p> The format of an RGBA value in the functional notation is &lsquo;<code
		class=css>rgba(</code>&rsquo; followed by a comma-separated list of three
	numerical values (either three integer values or three percentage values),
	followed by an <a class=index-inst href="#alphavaluedt"
					  id=ltalphavaluegt>&lt;alphavalue&gt;</a>, followed by &lsquo;<code
			class=css>)</code>&rsquo;. The integer value 255 corresponds to 100%,
	rgba(255,255,255,0.8) = rgba(100%,100%,100%,0.8). White space characters
	are allowed around the numerical values.

<p>Implementations must clip the red, green, and blue components of RGBA
	color values to the device gamut according to the rules for the RGB color
	value composed of those components.

<p>These examples specify effects that are possible with the rgba()
	notation:

<div class=example>
	<p style="display:none">Example(s):</p>

   <pre>
p { color: rgba(0,0,255,0.5) }        /* semi-transparent solid blue */
p { color: rgba(100%, 50%, 0%, 0.1) } /* very transparent solid orange */
</pre>
</div>

<p class=note><strong>Note.</strong> If RGBA values are not supported by a
	user agent, they should be treated like unrecognized values per the CSS
	forward compatibility parsing rules (<a href="#CSS21"
											rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, Chapter 4). RGBA values must
	<em>not</em> be treated as simply an RGB value with the opacity ignored.

<h4 id=transparent><span class=secno>4.2.3. </span>&lsquo;<a
		href="#transparent-def"><code class=css>transparent</code></a>&rsquo;
	color keyword</h4>

<p>CSS1 introduced the &lsquo;<a href="#transparent-def"><code
		class=css>transparent</code></a>&rsquo; value for the background-color
	property. CSS2 allowed border-color to also accept the &lsquo;<a
			href="#transparent-def"><code class=css>transparent</code></a>&rsquo;
	value. The Open eBook(tm) Publication Structure 1.0.1 <a href="#OEB101"
															 rel=biblioentry>[OEB101]<!--{{OEB101}}--></a> extended the &lsquo;<a
			href="#color0"><code class=property>color</code></a>&rsquo; property to
	also accept the &lsquo;<a href="#transparent-def"><code
			class=css>transparent</code></a>&rsquo; keyword. CSS3 extends the color
	value to include the &lsquo;<a href="#transparent-def"><code
			class=css>transparent</code></a>&rsquo; keyword to allow its use with all
	properties that accept a &lt;color&gt; value. This simplifies the
	definition of those properties in CSS3.

<dl>
	<dt><dfn id=transparent-def>transparent</dfn>

	<dd>Fully transparent. This keyword can be considered a shorthand for
		transparent black, rgba(0,0,0,0), which is its computed value.
</dl>

<h4 id=hsl-color><span class=secno>4.2.4. </span>HSL color values</h4>

<p>CSS3 adds numerical <span class=index-def id=hsl-def
							 title="hsl()">hue-saturation-lightness (HSL) colors as a complement to
   numerical RGB colors. It has been observed that RGB colors have the
   following limitations: </span>

<ul>
	<li>RGB is hardware-oriented: it reflects the use of CRTs.

	<li>RGB is non-intuitive. People can learn how to use RGB, but actually by
		internalizing how to translate hue, saturation and lightness, or
		something similar, to RGB.
</ul>

<p> There are several other color schemes possible. Some advantages of HSL
	are that it is symmetrical to lightness and darkness (which is not the
	case with HSV for example), and it is trivial to convert HSL to RGB.

<p> HSL colors are encoding as a triple (hue, saturation, lightness). Hue
	is represented as an angle of the color circle (i.e. the rainbow
	represented in a circle). This angle is so typically measured in degrees
	that the unit is implicit in CSS; syntactically, only a &lt;number&gt; is
	given. By definition red=0=360, and the other colors are spread around the
	circle, so green=120, blue=240, etc. As an angle, it implicitly wraps
	around such that -120=240 and 480=120. One way an implementation could
	normalize such an angle x to the range [0,360) (<em>i.e.</em> zero
	degrees, inclusive, to 360 degrees, exclusive) is to compute (((x mod 360)
	+ 360) mod 360). Saturation and lightness are represented as percentages.
	100% is full saturation, and 0% is a shade of gray. 0% lightness is black,
	100% lightness is white, and 50% lightness is &ldquo;normal&rdquo;.

<p>So for instance:

<div class=example>
	<p style="display:none">Example(s):</p>

   <pre>
* { color: hsl(0, 100%, 50%) }   /* red */
* { color: hsl(120, 100%, 50%) } /* lime */ 
* { color: hsl(120, 100%, 25%) } /* dark green */ 
* { color: hsl(120, 100%, 75%) } /* light green */ 
* { color: hsl(120, 75%, 75%) }  /* pastel green, and so on */
</pre>
</div>

<p> The advantage of HSL over RGB is that it is far more intuitive: you can
	guess at the colors you want, and then tweak. It is also easier to create
	sets of matching colors (by keeping the hue the same and varying the
	lightness/darkness, and saturation)

<p>If saturation is less than 0%, implementations must clip it to 0%. If
	the resulting value is outside the device gamut, implementations must clip
	it to the device gamut. This clipping should preserve the hue when
	possible, but is otherwise undefined. (In other words, the clipping is
	different from applying the rules for clipping of RGB colors after
	applying the algorithm below for converting HSL to RGB.)

<p> The algorithm to translate HSL to RGB is simple (here expressed in ABC
	<a href="#ABC" rel=biblioentry>[ABC]<!--{{ABC}}--></a> which was used to
	generate the tables.) In these algorithms, all three values (H, S and L)
	have been normalized to fractions 0..1:

  <pre class=code>
    HOW TO RETURN hsl.to.rgb(h, s, l): 
       SELECT: 
	  l&lt;=0.5: PUT l*(s+1) IN m2
	  ELSE: PUT l+s-l*s IN m2
       PUT l*2-m2 IN m1
       PUT hue.to.rgb(m1, m2, h+1/3) IN r
       PUT hue.to.rgb(m1, m2, h    ) IN g
       PUT hue.to.rgb(m1, m2, h-1/3) IN b
       RETURN (r, g, b)

    HOW TO RETURN hue.to.rgb(m1, m2, h): 
       IF h&lt;0: PUT h+1 IN h
       IF h&gt;1: PUT h-1 IN h
       IF h*6&lt;1: RETURN m1+(m2-m1)*h*6
       IF h*2&lt;1: RETURN m2
       IF h*3&lt;2: RETURN m1+(m2-m1)*(2/3-h)*6
       RETURN m1
</pre>

<h5 id=hsl-examples><span class=secno>4.2.4.1. </span>HSL examples</h5>

<p> Each table below represents one hue. Twelve equally spaced colors (i.e.
	at 30&deg; intervals) have been chosen from the color circle: red, yellow,
	green, cyan, blue, magenta, with all the intermediate colors (the last is
	the color between magenta and red).

<p> The X axis of each table represents the saturation (100%, 75%, 50%,
	25%, 0%).

<p> The Y axis represents the lightness. 50% is &ldquo;normal&rdquo;.

<table class=hslexample>
	<tbody>
	<tr>
		<th>

		<th colspan=5>0&deg; Reds

	<tr>
		<th>

		<th colspan=5>Saturation

	<tr>
		<th>

		<th>100%

		<th>75%

		<th>50%

		<th>25%

		<th>0%

	<tr>
		<th> 100

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

	<tr>
		<th> 88

		<td style="background:#FFBFBF">&nbsp;

		<td style="background:#F7C7C7">&nbsp;

		<td style="background:#EFCFCF">&nbsp;

		<td style="background:#E7D7D7">&nbsp;

		<td style="background:#DFDFDF">&nbsp;

	<tr>
		<th> 75

		<td style="background:#FF8080">&nbsp;

		<td style="background:#EF8F8F">&nbsp;

		<td style="background:#DF9F9F">&nbsp;

		<td style="background:#CFAFAF">&nbsp;

		<td style="background:#BFBFBF">&nbsp;

	<tr>
		<th> 63

		<td style="background:#FF4040">&nbsp;

		<td style="background:#E75858">&nbsp;

		<td style="background:#CF7070">&nbsp;

		<td style="background:#B78787">&nbsp;

		<td style="background:#9F9F9F">&nbsp;

	<tr>
		<th> 50

		<td style="background:#FF0000">&nbsp;

		<td style="background:#DF2020">&nbsp;

		<td style="background:#BF4040">&nbsp;

		<td style="background:#9F6060">&nbsp;

		<td style="background:#808080">&nbsp;

	<tr>
		<th> 38

		<td style="background:#BF0000">&nbsp;

		<td style="background:#A71818">&nbsp;

		<td style="background:#8F3030">&nbsp;

		<td style="background:#784848">&nbsp;

		<td style="background:#606060">&nbsp;

	<tr>
		<th> 25

		<td style="background:#800000">&nbsp;

		<td style="background:#701010">&nbsp;

		<td style="background:#602020">&nbsp;

		<td style="background:#503030">&nbsp;

		<td style="background:#404040">&nbsp;

	<tr>
		<th> 13

		<td style="background:#400000">&nbsp;

		<td style="background:#380808">&nbsp;

		<td style="background:#301010">&nbsp;

		<td style="background:#281818">&nbsp;

		<td style="background:#202020">&nbsp;

	<tr>
		<th> 0

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;
</table>

<table class=hslexample>
	<tbody>
	<tr>
		<th>

		<th colspan=5>30&deg; Red-Yellows (=Oranges)

	<tr>
		<th>

		<th colspan=5>Saturation

	<tr>
		<th>

		<th>100%

		<th>75%

		<th>50%

		<th>25%

		<th>0%

	<tr>
		<th> 100

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

	<tr>
		<th> 88

		<td style="background:#FFDFBF">&nbsp;

		<td style="background:#F7DFC7">&nbsp;

		<td style="background:#EFDFCF">&nbsp;

		<td style="background:#E7DFD7">&nbsp;

		<td style="background:#DFDFDF">&nbsp;

	<tr>
		<th> 75

		<td style="background:#FFBF80">&nbsp;

		<td style="background:#EFBF8F">&nbsp;

		<td style="background:#DFBF9F">&nbsp;

		<td style="background:#CFBFAF">&nbsp;

		<td style="background:#BFBFBF">&nbsp;

	<tr>
		<th> 63

		<td style="background:#FF9F40">&nbsp;

		<td style="background:#E79F58">&nbsp;

		<td style="background:#CF9F70">&nbsp;

		<td style="background:#B79F87">&nbsp;

		<td style="background:#9F9F9F">&nbsp;

	<tr>
		<th> 50

		<td style="background:#FF8000">&nbsp;

		<td style="background:#DF8020">&nbsp;

		<td style="background:#BF8040">&nbsp;

		<td style="background:#9F8060">&nbsp;

		<td style="background:#808080">&nbsp;

	<tr>
		<th> 38

		<td style="background:#BF6000">&nbsp;

		<td style="background:#A76018">&nbsp;

		<td style="background:#8F6030">&nbsp;

		<td style="background:#786048">&nbsp;

		<td style="background:#606060">&nbsp;

	<tr>
		<th> 25

		<td style="background:#804000">&nbsp;

		<td style="background:#704010">&nbsp;

		<td style="background:#604020">&nbsp;

		<td style="background:#504030">&nbsp;

		<td style="background:#404040">&nbsp;

	<tr>
		<th> 13

		<td style="background:#402000">&nbsp;

		<td style="background:#382008">&nbsp;

		<td style="background:#302010">&nbsp;

		<td style="background:#282018">&nbsp;

		<td style="background:#202020">&nbsp;

	<tr>
		<th> 0

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;
</table>

<table class=hslexample>
	<tbody>
	<tr>
		<th>

		<th colspan=5>60&deg; Yellows

	<tr>
		<th>

		<th colspan=5>Saturation

	<tr>
		<th>

		<th>100%

		<th>75%

		<th>50%

		<th>25%

		<th>0%

	<tr>
		<th> 100

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

	<tr>
		<th> 88

		<td style="background:#FFFFBF">&nbsp;

		<td style="background:#F7F7C7">&nbsp;

		<td style="background:#EFEFCF">&nbsp;

		<td style="background:#E7E7D7">&nbsp;

		<td style="background:#DFDFDF">&nbsp;

	<tr>
		<th> 75

		<td style="background:#FFFF80">&nbsp;

		<td style="background:#EFEF8F">&nbsp;

		<td style="background:#DFDF9F">&nbsp;

		<td style="background:#CFCFAF">&nbsp;

		<td style="background:#BFBFBF">&nbsp;

	<tr>
		<th> 63

		<td style="background:#FFFF40">&nbsp;

		<td style="background:#E7E758">&nbsp;

		<td style="background:#CFCF70">&nbsp;

		<td style="background:#B7B787">&nbsp;

		<td style="background:#9F9F9F">&nbsp;

	<tr>
		<th> 50

		<td style="background:#FFFF00">&nbsp;

		<td style="background:#DFDF20">&nbsp;

		<td style="background:#BFBF40">&nbsp;

		<td style="background:#9F9F60">&nbsp;

		<td style="background:#808080">&nbsp;

	<tr>
		<th> 38

		<td style="background:#BFBF00">&nbsp;

		<td style="background:#A7A718">&nbsp;

		<td style="background:#8F8F30">&nbsp;

		<td style="background:#787848">&nbsp;

		<td style="background:#606060">&nbsp;

	<tr>
		<th> 25

		<td style="background:#808000">&nbsp;

		<td style="background:#707010">&nbsp;

		<td style="background:#606020">&nbsp;

		<td style="background:#505030">&nbsp;

		<td style="background:#404040">&nbsp;

	<tr>
		<th> 13

		<td style="background:#404000">&nbsp;

		<td style="background:#383808">&nbsp;

		<td style="background:#303010">&nbsp;

		<td style="background:#282818">&nbsp;

		<td style="background:#202020">&nbsp;

	<tr>
		<th> 0

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;
</table>

<table class=hslexample>
	<tbody>
	<tr>
		<th>

		<th colspan=5>90&deg; Yellow-Greens

	<tr>
		<th>

		<th colspan=5>Saturation

	<tr>
		<th>

		<th>100%

		<th>75%

		<th>50%

		<th>25%

		<th>0%

	<tr>
		<th> 100

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

	<tr>
		<th> 88

		<td style="background:#DFFFBF">&nbsp;

		<td style="background:#DFF7C7">&nbsp;

		<td style="background:#DFEFCF">&nbsp;

		<td style="background:#DFE7D7">&nbsp;

		<td style="background:#DFDFDF">&nbsp;

	<tr>
		<th> 75

		<td style="background:#BFFF80">&nbsp;

		<td style="background:#BFEF8F">&nbsp;

		<td style="background:#BFDF9F">&nbsp;

		<td style="background:#BFCFAF">&nbsp;

		<td style="background:#BFBFBF">&nbsp;

	<tr>
		<th> 63

		<td style="background:#9FFF40">&nbsp;

		<td style="background:#9FE758">&nbsp;

		<td style="background:#9FCF70">&nbsp;

		<td style="background:#9FB787">&nbsp;

		<td style="background:#9F9F9F">&nbsp;

	<tr>
		<th> 50

		<td style="background:#80FF00">&nbsp;

		<td style="background:#80DF20">&nbsp;

		<td style="background:#80BF40">&nbsp;

		<td style="background:#809F60">&nbsp;

		<td style="background:#808080">&nbsp;

	<tr>
		<th> 38

		<td style="background:#60BF00">&nbsp;

		<td style="background:#60A718">&nbsp;

		<td style="background:#608F30">&nbsp;

		<td style="background:#607848">&nbsp;

		<td style="background:#606060">&nbsp;

	<tr>
		<th> 25

		<td style="background:#408000">&nbsp;

		<td style="background:#407010">&nbsp;

		<td style="background:#406020">&nbsp;

		<td style="background:#405030">&nbsp;

		<td style="background:#404040">&nbsp;

	<tr>
		<th> 13

		<td style="background:#204000">&nbsp;

		<td style="background:#203808">&nbsp;

		<td style="background:#203010">&nbsp;

		<td style="background:#202818">&nbsp;

		<td style="background:#202020">&nbsp;

	<tr>
		<th> 0

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;
</table>

<table class=hslexample>
	<tbody>
	<tr>
		<th>

		<th colspan=5>120&deg; Greens

	<tr>
		<th>

		<th colspan=5>Saturation

	<tr>
		<th>

		<th>100%

		<th>75%

		<th>50%

		<th>25%

		<th>0%

	<tr>
		<th> 100

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

	<tr>
		<th> 88

		<td style="background:#BFFFBF">&nbsp;

		<td style="background:#C7F7C7">&nbsp;

		<td style="background:#CFEFCF">&nbsp;

		<td style="background:#D7E7D7">&nbsp;

		<td style="background:#DFDFDF">&nbsp;

	<tr>
		<th> 75

		<td style="background:#80FF80">&nbsp;

		<td style="background:#8FEF8F">&nbsp;

		<td style="background:#9FDF9F">&nbsp;

		<td style="background:#AFCFAF">&nbsp;

		<td style="background:#BFBFBF">&nbsp;

	<tr>
		<th> 63

		<td style="background:#40FF40">&nbsp;

		<td style="background:#58E758">&nbsp;

		<td style="background:#70CF70">&nbsp;

		<td style="background:#87B787">&nbsp;

		<td style="background:#9F9F9F">&nbsp;

	<tr>
		<th> 50

		<td style="background:#00FF00">&nbsp;

		<td style="background:#20DF20">&nbsp;

		<td style="background:#40BF40">&nbsp;

		<td style="background:#609F60">&nbsp;

		<td style="background:#808080">&nbsp;

	<tr>
		<th> 38

		<td style="background:#00BF00">&nbsp;

		<td style="background:#18A718">&nbsp;

		<td style="background:#308F30">&nbsp;

		<td style="background:#487848">&nbsp;

		<td style="background:#606060">&nbsp;

	<tr>
		<th> 25

		<td style="background:#008000">&nbsp;

		<td style="background:#107010">&nbsp;

		<td style="background:#206020">&nbsp;

		<td style="background:#305030">&nbsp;

		<td style="background:#404040">&nbsp;

	<tr>
		<th> 13

		<td style="background:#004000">&nbsp;

		<td style="background:#083808">&nbsp;

		<td style="background:#103010">&nbsp;

		<td style="background:#182818">&nbsp;

		<td style="background:#202020">&nbsp;

	<tr>
		<th> 0

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;
</table>

<table class=hslexample>
	<tbody>
	<tr>
		<th>

		<th colspan=5>150&deg; Green-Cyans

	<tr>
		<th>

		<th colspan=5>Saturation

	<tr>
		<th>

		<th>100%

		<th>75%

		<th>50%

		<th>25%

		<th>0%

	<tr>
		<th> 100

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

	<tr>
		<th> 88

		<td style="background:#BFFFDF">&nbsp;

		<td style="background:#C7F7DF">&nbsp;

		<td style="background:#CFEFDF">&nbsp;

		<td style="background:#D7E7DF">&nbsp;

		<td style="background:#DFDFDF">&nbsp;

	<tr>
		<th> 75

		<td style="background:#80FFBF">&nbsp;

		<td style="background:#8FEFBF">&nbsp;

		<td style="background:#9FDFBF">&nbsp;

		<td style="background:#AFCFBF">&nbsp;

		<td style="background:#BFBFBF">&nbsp;

	<tr>
		<th> 63

		<td style="background:#40FF9F">&nbsp;

		<td style="background:#58E79F">&nbsp;

		<td style="background:#70CF9F">&nbsp;

		<td style="background:#87B79F">&nbsp;

		<td style="background:#9F9F9F">&nbsp;

	<tr>
		<th> 50

		<td style="background:#00FF80">&nbsp;

		<td style="background:#20DF80">&nbsp;

		<td style="background:#40BF80">&nbsp;

		<td style="background:#609F80">&nbsp;

		<td style="background:#808080">&nbsp;

	<tr>
		<th> 38

		<td style="background:#00BF60">&nbsp;

		<td style="background:#18A760">&nbsp;

		<td style="background:#308F60">&nbsp;

		<td style="background:#487860">&nbsp;

		<td style="background:#606060">&nbsp;

	<tr>
		<th> 25

		<td style="background:#008040">&nbsp;

		<td style="background:#107040">&nbsp;

		<td style="background:#206040">&nbsp;

		<td style="background:#305040">&nbsp;

		<td style="background:#404040">&nbsp;

	<tr>
		<th> 13

		<td style="background:#004020">&nbsp;

		<td style="background:#083820">&nbsp;

		<td style="background:#103020">&nbsp;

		<td style="background:#182820">&nbsp;

		<td style="background:#202020">&nbsp;

	<tr>
		<th> 0

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;
</table>

<table class=hslexample>
	<tbody>
	<tr>
		<th>

		<th colspan=5>180&deg; Cyans

	<tr>
		<th>

		<th colspan=5>Saturation

	<tr>
		<th>

		<th>100%

		<th>75%

		<th>50%

		<th>25%

		<th>0%

	<tr>
		<th> 100

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

	<tr>
		<th> 88

		<td style="background:#BFFFFF">&nbsp;

		<td style="background:#C7F7F7">&nbsp;

		<td style="background:#CFEFEF">&nbsp;

		<td style="background:#D7E7E7">&nbsp;

		<td style="background:#DFDFDF">&nbsp;

	<tr>
		<th> 75

		<td style="background:#80FFFF">&nbsp;

		<td style="background:#8FEFEF">&nbsp;

		<td style="background:#9FDFDF">&nbsp;

		<td style="background:#AFCFCF">&nbsp;

		<td style="background:#BFBFBF">&nbsp;

	<tr>
		<th> 63

		<td style="background:#40FFFF">&nbsp;

		<td style="background:#58E7E7">&nbsp;

		<td style="background:#70CFCF">&nbsp;

		<td style="background:#87B7B7">&nbsp;

		<td style="background:#9F9F9F">&nbsp;

	<tr>
		<th> 50

		<td style="background:#00FFFF">&nbsp;

		<td style="background:#20DFDF">&nbsp;

		<td style="background:#40BFBF">&nbsp;

		<td style="background:#609F9F">&nbsp;

		<td style="background:#808080">&nbsp;

	<tr>
		<th> 38

		<td style="background:#00BFBF">&nbsp;

		<td style="background:#18A7A7">&nbsp;

		<td style="background:#308F8F">&nbsp;

		<td style="background:#487878">&nbsp;

		<td style="background:#606060">&nbsp;

	<tr>
		<th> 25

		<td style="background:#008080">&nbsp;

		<td style="background:#107070">&nbsp;

		<td style="background:#206060">&nbsp;

		<td style="background:#305050">&nbsp;

		<td style="background:#404040">&nbsp;

	<tr>
		<th> 13

		<td style="background:#004040">&nbsp;

		<td style="background:#083838">&nbsp;

		<td style="background:#103030">&nbsp;

		<td style="background:#182828">&nbsp;

		<td style="background:#202020">&nbsp;

	<tr>
		<th> 0

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;
</table>

<table class=hslexample>
	<tbody>
	<tr>
		<th>

		<th colspan=5>210&deg; Cyan-Blues

	<tr>
		<th>

		<th colspan=5>Saturation

	<tr>
		<th>

		<th>100%

		<th>75%

		<th>50%

		<th>25%

		<th>0%

	<tr>
		<th> 100

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

	<tr>
		<th> 88

		<td style="background:#BFDFFF">&nbsp;

		<td style="background:#C7DFF7">&nbsp;

		<td style="background:#CFDFEF">&nbsp;

		<td style="background:#D7DFE7">&nbsp;

		<td style="background:#DFDFDF">&nbsp;

	<tr>
		<th> 75

		<td style="background:#80BFFF">&nbsp;

		<td style="background:#8FBFEF">&nbsp;

		<td style="background:#9FBFDF">&nbsp;

		<td style="background:#AFBFCF">&nbsp;

		<td style="background:#BFBFBF">&nbsp;

	<tr>
		<th> 63

		<td style="background:#409FFF">&nbsp;

		<td style="background:#589FE7">&nbsp;

		<td style="background:#709FCF">&nbsp;

		<td style="background:#879FB7">&nbsp;

		<td style="background:#9F9F9F">&nbsp;

	<tr>
		<th> 50

		<td style="background:#0080FF">&nbsp;

		<td style="background:#2080DF">&nbsp;

		<td style="background:#4080BF">&nbsp;

		<td style="background:#60809F">&nbsp;

		<td style="background:#808080">&nbsp;

	<tr>
		<th> 38

		<td style="background:#0060BF">&nbsp;

		<td style="background:#1860A7">&nbsp;

		<td style="background:#30608F">&nbsp;

		<td style="background:#486078">&nbsp;

		<td style="background:#606060">&nbsp;

	<tr>
		<th> 25

		<td style="background:#004080">&nbsp;

		<td style="background:#104070">&nbsp;

		<td style="background:#204060">&nbsp;

		<td style="background:#304050">&nbsp;

		<td style="background:#404040">&nbsp;

	<tr>
		<th> 13

		<td style="background:#002040">&nbsp;

		<td style="background:#082038">&nbsp;

		<td style="background:#102030">&nbsp;

		<td style="background:#182028">&nbsp;

		<td style="background:#202020">&nbsp;

	<tr>
		<th> 0

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;
</table>

<table class=hslexample>
	<tbody>
	<tr>
		<th>

		<th colspan=5>240&deg; Blues

	<tr>
		<th>

		<th colspan=5>Saturation

	<tr>
		<th>

		<th>100%

		<th>75%

		<th>50%

		<th>25%

		<th>0%

	<tr>
		<th> 100

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

	<tr>
		<th> 88

		<td style="background:#BFBFFF">&nbsp;

		<td style="background:#C7C7F7">&nbsp;

		<td style="background:#CFCFEF">&nbsp;

		<td style="background:#D7D7E7">&nbsp;

		<td style="background:#DFDFDF">&nbsp;

	<tr>
		<th> 75

		<td style="background:#8080FF">&nbsp;

		<td style="background:#8F8FEF">&nbsp;

		<td style="background:#9F9FDF">&nbsp;

		<td style="background:#AFAFCF">&nbsp;

		<td style="background:#BFBFBF">&nbsp;

	<tr>
		<th> 63

		<td style="background:#4040FF">&nbsp;

		<td style="background:#5858E7">&nbsp;

		<td style="background:#7070CF">&nbsp;

		<td style="background:#8787B7">&nbsp;

		<td style="background:#9F9F9F">&nbsp;

	<tr>
		<th> 50

		<td style="background:#0000FF">&nbsp;

		<td style="background:#2020DF">&nbsp;

		<td style="background:#4040BF">&nbsp;

		<td style="background:#60609F">&nbsp;

		<td style="background:#808080">&nbsp;

	<tr>
		<th> 38

		<td style="background:#0000BF">&nbsp;

		<td style="background:#1818A7">&nbsp;

		<td style="background:#30308F">&nbsp;

		<td style="background:#484878">&nbsp;

		<td style="background:#606060">&nbsp;

	<tr>
		<th> 25

		<td style="background:#000080">&nbsp;

		<td style="background:#101070">&nbsp;

		<td style="background:#202060">&nbsp;

		<td style="background:#303050">&nbsp;

		<td style="background:#404040">&nbsp;

	<tr>
		<th> 13

		<td style="background:#000040">&nbsp;

		<td style="background:#080838">&nbsp;

		<td style="background:#101030">&nbsp;

		<td style="background:#181828">&nbsp;

		<td style="background:#202020">&nbsp;

	<tr>
		<th> 0

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;
</table>

<table class=hslexample>
	<tbody>
	<tr>
		<th>

		<th colspan=5>270&deg; Blue-Magentas

	<tr>
		<th>

		<th colspan=5>Saturation

	<tr>
		<th>

		<th>100%

		<th>75%

		<th>50%

		<th>25%

		<th>0%

	<tr>
		<th> 100

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

	<tr>
		<th> 88

		<td style="background:#DFBFFF">&nbsp;

		<td style="background:#DFC7F7">&nbsp;

		<td style="background:#DFCFEF">&nbsp;

		<td style="background:#DFD7E7">&nbsp;

		<td style="background:#DFDFDF">&nbsp;

	<tr>
		<th> 75

		<td style="background:#BF80FF">&nbsp;

		<td style="background:#BF8FEF">&nbsp;

		<td style="background:#BF9FDF">&nbsp;

		<td style="background:#BFAFCF">&nbsp;

		<td style="background:#BFBFBF">&nbsp;

	<tr>
		<th> 63

		<td style="background:#9F40FF">&nbsp;

		<td style="background:#9F58E7">&nbsp;

		<td style="background:#9F70CF">&nbsp;

		<td style="background:#9F87B7">&nbsp;

		<td style="background:#9F9F9F">&nbsp;

	<tr>
		<th> 50

		<td style="background:#8000FF">&nbsp;

		<td style="background:#8020DF">&nbsp;

		<td style="background:#8040BF">&nbsp;

		<td style="background:#80609F">&nbsp;

		<td style="background:#808080">&nbsp;

	<tr>
		<th> 38

		<td style="background:#6000BF">&nbsp;

		<td style="background:#6018A7">&nbsp;

		<td style="background:#60308F">&nbsp;

		<td style="background:#604878">&nbsp;

		<td style="background:#606060">&nbsp;

	<tr>
		<th> 25

		<td style="background:#400080">&nbsp;

		<td style="background:#401070">&nbsp;

		<td style="background:#402060">&nbsp;

		<td style="background:#403050">&nbsp;

		<td style="background:#404040">&nbsp;

	<tr>
		<th> 13

		<td style="background:#200040">&nbsp;

		<td style="background:#200838">&nbsp;

		<td style="background:#201030">&nbsp;

		<td style="background:#201828">&nbsp;

		<td style="background:#202020">&nbsp;

	<tr>
		<th> 0

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;
</table>

<table class=hslexample>
	<tbody>
	<tr>
		<th>

		<th colspan=5>300&deg; Magentas

	<tr>
		<th>

		<th colspan=5>Saturation

	<tr>
		<th>

		<th>100%

		<th>75%

		<th>50%

		<th>25%

		<th>0%

	<tr>
		<th> 100

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

	<tr>
		<th> 88

		<td style="background:#FFBFFF">&nbsp;

		<td style="background:#F7C7F7">&nbsp;

		<td style="background:#EFCFEF">&nbsp;

		<td style="background:#E7D7E7">&nbsp;

		<td style="background:#DFDFDF">&nbsp;

	<tr>
		<th> 75

		<td style="background:#FF80FF">&nbsp;

		<td style="background:#EF8FEF">&nbsp;

		<td style="background:#DF9FDF">&nbsp;

		<td style="background:#CFAFCF">&nbsp;

		<td style="background:#BFBFBF">&nbsp;

	<tr>
		<th> 63

		<td style="background:#FF40FF">&nbsp;

		<td style="background:#E758E7">&nbsp;

		<td style="background:#CF70CF">&nbsp;

		<td style="background:#B787B7">&nbsp;

		<td style="background:#9F9F9F">&nbsp;

	<tr>
		<th> 50

		<td style="background:#FF00FF">&nbsp;

		<td style="background:#DF20DF">&nbsp;

		<td style="background:#BF40BF">&nbsp;

		<td style="background:#9F609F">&nbsp;

		<td style="background:#808080">&nbsp;

	<tr>
		<th> 38

		<td style="background:#BF00BF">&nbsp;

		<td style="background:#A718A7">&nbsp;

		<td style="background:#8F308F">&nbsp;

		<td style="background:#784878">&nbsp;

		<td style="background:#606060">&nbsp;

	<tr>
		<th> 25

		<td style="background:#800080">&nbsp;

		<td style="background:#701070">&nbsp;

		<td style="background:#602060">&nbsp;

		<td style="background:#503050">&nbsp;

		<td style="background:#404040">&nbsp;

	<tr>
		<th> 13

		<td style="background:#400040">&nbsp;

		<td style="background:#380838">&nbsp;

		<td style="background:#301030">&nbsp;

		<td style="background:#281828">&nbsp;

		<td style="background:#202020">&nbsp;

	<tr>
		<th> 0

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;
</table>

<table class=hslexample>
	<tbody>
	<tr>
		<th>

		<th colspan=5>330&deg; Magenta-Reds

	<tr>
		<th>

		<th colspan=5>Saturation

	<tr>
		<th>

		<th>100%

		<th>75%

		<th>50%

		<th>25%

		<th>0%

	<tr>
		<th> 100

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

		<td style="background:#FFFFFF">&nbsp;

	<tr>
		<th> 88

		<td style="background:#FFBFDF">&nbsp;

		<td style="background:#F7C7DF">&nbsp;

		<td style="background:#EFCFDF">&nbsp;

		<td style="background:#E7D7DF">&nbsp;

		<td style="background:#DFDFDF">&nbsp;

	<tr>
		<th> 75

		<td style="background:#FF80BF">&nbsp;

		<td style="background:#EF8FBF">&nbsp;

		<td style="background:#DF9FBF">&nbsp;

		<td style="background:#CFAFBF">&nbsp;

		<td style="background:#BFBFBF">&nbsp;

	<tr>
		<th> 63

		<td style="background:#FF409F">&nbsp;

		<td style="background:#E7589F">&nbsp;

		<td style="background:#CF709F">&nbsp;

		<td style="background:#B7879F">&nbsp;

		<td style="background:#9F9F9F">&nbsp;

	<tr>
		<th> 50

		<td style="background:#FF0080">&nbsp;

		<td style="background:#DF2080">&nbsp;

		<td style="background:#BF4080">&nbsp;

		<td style="background:#9F6080">&nbsp;

		<td style="background:#808080">&nbsp;

	<tr>
		<th> 38

		<td style="background:#BF0060">&nbsp;

		<td style="background:#A71860">&nbsp;

		<td style="background:#8F3060">&nbsp;

		<td style="background:#784860">&nbsp;

		<td style="background:#606060">&nbsp;

	<tr>
		<th> 25

		<td style="background:#800040">&nbsp;

		<td style="background:#701040">&nbsp;

		<td style="background:#602040">&nbsp;

		<td style="background:#503040">&nbsp;

		<td style="background:#404040">&nbsp;

	<tr>
		<th> 13

		<td style="background:#400020">&nbsp;

		<td style="background:#380820">&nbsp;

		<td style="background:#301020">&nbsp;

		<td style="background:#281820">&nbsp;

		<td style="background:#202020">&nbsp;

	<tr>
		<th> 0

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;

		<td style="background:#000000">&nbsp;
</table>

<h4 id=hsla-color style="margin-top:2em"><span class=secno>4.2.5.
   </span>HSLA color values</h4>

<p><span class=index-def id=hsla-def title="hsla()">Just as the
	&lsquo;<code class=css>rgb()</code>&rsquo; functional notation has the
	&lsquo;<code class=css>rgba()</code>&rsquo; alpha counterpart, the
	&lsquo;<code class=css>hsl()</code>&rsquo; functional notation has the
	&lsquo;<code class=css>hsla()</code>&rsquo; alpha counterpart.</span> See
	<a href="#alpha">simple alpha compositing</a> for details. These examples
	specify the same color:

<div class=example>
	<p style="display:none">Example(s):</p>

   <pre>
em { color: hsl(120, 100%, 50%) }     /* green */
em { color: hsla(120, 100%, 50%, 1) } /* the same, with explicit opacity of 1 */
</pre>
</div>

<p>The format of an HSLA color value in the functional notation is
	&lsquo;<code class=css>hsla(</code>&rsquo; followed by the hue in degrees,
	saturation and lightness as a percentage, and an <a class=index-inst
														href="#alphavaluedt" id=ltalphavaluegt0>&lt;alphavalue&gt;</a>, followed
	by &lsquo;<code class=css>)</code>&rsquo;. White space characters are
	allowed around the numerical values.

<p>Implementations must clip the hue, saturation, and lightness components
	of HSLA color values to the device gamut according to the rules for the
	HSL color value composed of those components.

<p>These examples specify effects that are possible with the hsla()
	notation:

<div class=example>
	<p style="display:none">Example(s):</p>

   <pre>
p { color: hsla(240, 100%, 50%, 0.5) } /* semi-transparent solid blue */
p { color: hsla(30, 100%, 50%, 0.1) }  /* very transparent solid orange */
</pre>
</div>

<h3 id=svg-color><span class=secno>4.3. </span>Extended color keywords</h3>

<p>The table below provides a list of the X11 colors <a href="#X11COLORS"
														rel=biblioentry>[X11COLORS]<!--{{X11COLORS}}--></a> supported by popular
	browsers with the addition of gray/grey variants from SVG 1.0. The
	resulting list is precisely the same as the <a
			href="http://www.w3.org/TR/SVG/types.html#ColorKeywords">SVG 1.0 color
		keyword names</a>. This specification extends their definition beyond SVG.
	The two color swatches on the left illustrate setting the background color
	of a table cell in two ways: The first column uses the named color value,
	and the second column uses the respective numeric color value.

<table class=colortable>
	<tbody>
	<tr>
		<th style="background:black">Named

		<th>Numeric

		<th>Color&nbsp;name

		<th>Hex&nbsp;rgb

		<th>Decimal

	<tr>
		<td class=c style="background:aliceblue">&nbsp;

		<td class=c style="background:#f0f8ff">&nbsp;

		<td><dfn id=aliceblue>aliceblue</dfn>

		<td class=c style="background:silver">#f0f8ff

		<td class=c style="background:silver">240,248,255

	<tr>
		<td class=c style="background:antiquewhite">&nbsp;

		<td class=c style="background:#faebd7">&nbsp;

		<td><dfn id=antiquewhite>antiquewhite</dfn>

		<td class=c style="background:silver">#faebd7

		<td class=c style="background:silver">250,235,215

	<tr>
		<td class=c style="background:aqua">&nbsp;

		<td class=c style="background:#00ffff">&nbsp;

		<td><dfn id=aqua0>aqua</dfn>

		<td class=c style="background:silver">#00ffff

		<td class=c style="background:silver">0,255,255

	<tr>
		<td class=c style="background:aquamarine">&nbsp;

		<td class=c style="background:#7fffd4">&nbsp;

		<td><dfn id=aquamarine>aquamarine</dfn>

		<td class=c style="background:silver">#7fffd4

		<td class=c style="background:silver">127,255,212

	<tr>
		<td class=c style="background:azure">&nbsp;

		<td class=c style="background:#f0ffff">&nbsp;

		<td><dfn id=azure>azure</dfn>

		<td class=c style="background:silver">#f0ffff

		<td class=c style="background:silver">240,255,255

	<tr>
		<td class=c style="background:beige">&nbsp;

		<td class=c style="background:#f5f5dc">&nbsp;

		<td><dfn id=beige>beige</dfn>

		<td class=c style="background:silver">#f5f5dc

		<td class=c style="background:silver">245,245,220

	<tr>
		<td class=c style="background:bisque">&nbsp;

		<td class=c style="background:#ffe4c4">&nbsp;

		<td><dfn id=bisque>bisque</dfn>

		<td class=c style="background:silver">#ffe4c4

		<td class=c style="background:silver">255,228,196

	<tr>
		<td class=c style="background:black">&nbsp;

		<td class=c style="background:#000000">&nbsp;

		<td><dfn id=black0>black</dfn>

		<td class=c style="background:silver">#000000

		<td class=c style="background:silver">0,0,0

	<tr>
		<td class=c style="background:blanchedalmond">&nbsp;

		<td class=c style="background:#ffebcd">&nbsp;

		<td><dfn id=blanchedalmond>blanchedalmond</dfn>

		<td class=c style="background:silver">#ffebcd

		<td class=c style="background:silver">255,235,205

	<tr>
		<td class=c style="background:blue">&nbsp;

		<td class=c style="background:#0000ff">&nbsp;

		<td><dfn id=blue0>blue</dfn>

		<td class=c style="background:silver">#0000ff

		<td class=c style="background:silver">0,0,255

	<tr>
		<td class=c style="background:blueviolet">&nbsp;

		<td class=c style="background:#8a2be2">&nbsp;

		<td><dfn id=blueviolet>blueviolet</dfn>

		<td class=c style="background:silver">#8a2be2

		<td class=c style="background:silver">138,43,226

	<tr>
		<td class=c style="background:brown">&nbsp;

		<td class=c style="background:#a52a2a">&nbsp;

		<td><dfn id=brown>brown</dfn>

		<td class=c style="background:silver">#a52a2a

		<td class=c style="background:silver">165,42,42

	<tr>
		<td class=c style="background:burlywood">&nbsp;

		<td class=c style="background:#deb887">&nbsp;

		<td><dfn id=burlywood>burlywood</dfn>

		<td class=c style="background:silver">#deb887

		<td class=c style="background:silver">222,184,135

	<tr>
		<td class=c style="background:cadetblue">&nbsp;

		<td class=c style="background:#5f9ea0">&nbsp;

		<td><dfn id=cadetblue>cadetblue</dfn>

		<td class=c style="background:silver">#5f9ea0

		<td class=c style="background:silver">95,158,160

	<tr>
		<td class=c style="background:chartreuse">&nbsp;

		<td class=c style="background:#7fff00">&nbsp;

		<td><dfn id=chartreuse>chartreuse</dfn>

		<td class=c style="background:silver">#7fff00

		<td class=c style="background:silver">127,255,0

	<tr>
		<td class=c style="background:chocolate">&nbsp;

		<td class=c style="background:#d2691e">&nbsp;

		<td><dfn id=chocolate>chocolate</dfn>

		<td class=c style="background:silver">#d2691e

		<td class=c style="background:silver">210,105,30

	<tr>
		<td class=c style="background:coral">&nbsp;

		<td class=c style="background:#ff7f50">&nbsp;

		<td><dfn id=coral>coral</dfn>

		<td class=c style="background:silver">#ff7f50

		<td class=c style="background:silver">255,127,80

	<tr>
		<td class=c style="background:cornflowerblue">&nbsp;

		<td class=c style="background:#6495ed">&nbsp;

		<td><dfn id=cornflowerblue>cornflowerblue</dfn>

		<td class=c style="background:silver">#6495ed

		<td class=c style="background:silver">100,149,237

	<tr>
		<td class=c style="background:cornsilk">&nbsp;

		<td class=c style="background:#fff8dc">&nbsp;

		<td><dfn id=cornsilk>cornsilk</dfn>

		<td class=c style="background:silver">#fff8dc

		<td class=c style="background:silver">255,248,220

	<tr>
		<td class=c style="background:crimson">&nbsp;

		<td class=c style="background:#dc143c">&nbsp;

		<td><dfn id=crimson>crimson</dfn>

		<td class=c style="background:silver">#dc143c

		<td class=c style="background:silver">220,20,60

	<tr>
		<td class=c style="background:cyan">&nbsp;

		<td class=c style="background:#00ffff">&nbsp;

		<td><dfn id=cyan>cyan</dfn>

		<td class=c style="background:silver">#00ffff

		<td class=c style="background:silver">0,255,255

	<tr>
		<td class=c style="background:darkblue">&nbsp;

		<td class=c style="background:#00008b">&nbsp;

		<td><dfn id=darkblue>darkblue</dfn>

		<td class=c style="background:silver">#00008b

		<td class=c style="background:silver">0,0,139

	<tr>
		<td class=c style="background:darkcyan">&nbsp;

		<td class=c style="background:#008b8b">&nbsp;

		<td><dfn id=darkcyan>darkcyan</dfn>

		<td class=c style="background:silver">#008b8b

		<td class=c style="background:silver">0,139,139

	<tr>
		<td class=c style="background:darkgoldenrod">&nbsp;

		<td class=c style="background:#b8860b">&nbsp;

		<td><dfn id=darkgoldenrod>darkgoldenrod</dfn>

		<td class=c style="background:silver">#b8860b

		<td class=c style="background:silver">184,134,11

	<tr>
		<td class=c style="background:darkgray">&nbsp;

		<td class=c style="background:#a9a9a9">&nbsp;

		<td><dfn id=darkgray>darkgray</dfn>

		<td class=c style="background:silver">#a9a9a9

		<td class=c style="background:silver">169,169,169

	<tr>
		<td class=c style="background:darkgreen">&nbsp;

		<td class=c style="background:#006400">&nbsp;

		<td><dfn id=darkgreen>darkgreen</dfn>

		<td class=c style="background:silver">#006400

		<td class=c style="background:silver">0,100,0

	<tr>
		<td class=c style="background:darkgrey">&nbsp;

		<td class=c style="background:#a9a9a9">&nbsp;

		<td><dfn id=darkgrey>darkgrey</dfn>

		<td class=c style="background:silver">#a9a9a9

		<td class=c style="background:silver">169,169,169

	<tr>
		<td class=c style="background:darkkhaki">&nbsp;

		<td class=c style="background:#bdb76b">&nbsp;

		<td><dfn id=darkkhaki>darkkhaki</dfn>

		<td class=c style="background:silver">#bdb76b

		<td class=c style="background:silver">189,183,107

	<tr>
		<td class=c style="background:darkmagenta">&nbsp;

		<td class=c style="background:#8b008b">&nbsp;

		<td><dfn id=darkmagenta>darkmagenta</dfn>

		<td class=c style="background:silver">#8b008b

		<td class=c style="background:silver">139,0,139

	<tr>
		<td class=c style="background:darkolivegreen">&nbsp;

		<td class=c style="background:#556b2f">&nbsp;

		<td><dfn id=darkolivegreen>darkolivegreen</dfn>

		<td class=c style="background:silver">#556b2f

		<td class=c style="background:silver">85,107,47

	<tr>
		<td class=c style="background:darkorange">&nbsp;

		<td class=c style="background:#ff8c00">&nbsp;

		<td><dfn id=darkorange>darkorange</dfn>

		<td class=c style="background:silver">#ff8c00

		<td class=c style="background:silver">255,140,0

	<tr>
		<td class=c style="background:darkorchid">&nbsp;

		<td class=c style="background:#9932cc">&nbsp;

		<td><dfn id=darkorchid>darkorchid</dfn>

		<td class=c style="background:silver">#9932cc

		<td class=c style="background:silver">153,50,204

	<tr>
		<td class=c style="background:darkred">&nbsp;

		<td class=c style="background:#8b0000">&nbsp;

		<td><dfn id=darkred>darkred</dfn>

		<td class=c style="background:silver">#8b0000

		<td class=c style="background:silver">139,0,0

	<tr>
		<td class=c style="background:darksalmon">&nbsp;

		<td class=c style="background:#e9967a">&nbsp;

		<td><dfn id=darksalmon>darksalmon</dfn>

		<td class=c style="background:silver">#e9967a

		<td class=c style="background:silver">233,150,122

	<tr>
		<td class=c style="background:darkseagreen">&nbsp;

		<td class=c style="background:#8fbc8f">&nbsp;

		<td><dfn id=darkseagreen>darkseagreen</dfn>

		<td class=c style="background:silver">#8fbc8f

		<td class=c style="background:silver">143,188,143

	<tr>
		<td class=c style="background:darkslateblue">&nbsp;

		<td class=c style="background:#483d8b">&nbsp;

		<td><dfn id=darkslateblue>darkslateblue</dfn>

		<td class=c style="background:silver">#483d8b

		<td class=c style="background:silver">72,61,139

	<tr>
		<td class=c style="background:darkslategray">&nbsp;

		<td class=c style="background:#2f4f4f">&nbsp;

		<td><dfn id=darkslategray>darkslategray</dfn>

		<td class=c style="background:silver">#2f4f4f

		<td class=c style="background:silver">47,79,79

	<tr>
		<td class=c style="background:darkslategrey">&nbsp;

		<td class=c style="background:#2f4f4f">&nbsp;

		<td><dfn id=darkslategrey>darkslategrey</dfn>

		<td class=c style="background:silver">#2f4f4f

		<td class=c style="background:silver">47,79,79

	<tr>
		<td class=c style="background:darkturquoise">&nbsp;

		<td class=c style="background:#00ced1">&nbsp;

		<td><dfn id=darkturquoise>darkturquoise</dfn>

		<td class=c style="background:silver">#00ced1

		<td class=c style="background:silver">0,206,209

	<tr>
		<td class=c style="background:darkviolet">&nbsp;

		<td class=c style="background:#9400d3">&nbsp;

		<td><dfn id=darkviolet>darkviolet</dfn>

		<td class=c style="background:silver">#9400d3

		<td class=c style="background:silver">148,0,211

	<tr>
		<td class=c style="background:deeppink">&nbsp;

		<td class=c style="background:#ff1493">&nbsp;

		<td><dfn id=deeppink>deeppink</dfn>

		<td class=c style="background:silver">#ff1493

		<td class=c style="background:silver">255,20,147

	<tr>
		<td class=c style="background:deepskyblue">&nbsp;

		<td class=c style="background:#00bfff">&nbsp;

		<td><dfn id=deepskyblue>deepskyblue</dfn>

		<td class=c style="background:silver">#00bfff

		<td class=c style="background:silver">0,191,255

	<tr>
		<td class=c style="background:dimgray">&nbsp;

		<td class=c style="background:#696969">&nbsp;

		<td><dfn id=dimgray>dimgray</dfn>

		<td class=c style="background:silver">#696969

		<td class=c style="background:silver">105,105,105

	<tr>
		<td class=c style="background:dimgrey">&nbsp;

		<td class=c style="background:#696969">&nbsp;

		<td><dfn id=dimgrey>dimgrey</dfn>

		<td class=c style="background:silver">#696969

		<td class=c style="background:silver">105,105,105

	<tr>
		<td class=c style="background:dodgerblue">&nbsp;

		<td class=c style="background:#1e90ff">&nbsp;

		<td><dfn id=dodgerblue>dodgerblue</dfn>

		<td class=c style="background:silver">#1e90ff

		<td class=c style="background:silver">30,144,255

	<tr>
		<td class=c style="background:firebrick">&nbsp;

		<td class=c style="background:#b22222">&nbsp;

		<td><dfn id=firebrick>firebrick</dfn>

		<td class=c style="background:silver">#b22222

		<td class=c style="background:silver">178,34,34

	<tr>
		<td class=c style="background:floralwhite">&nbsp;

		<td class=c style="background:#fffaf0">&nbsp;

		<td><dfn id=floralwhite>floralwhite</dfn>

		<td class=c style="background:silver">#fffaf0

		<td class=c style="background:silver">255,250,240

	<tr>
		<td class=c style="background:forestgreen">&nbsp;

		<td class=c style="background:#228b22">&nbsp;

		<td><dfn id=forestgreen>forestgreen</dfn>

		<td class=c style="background:silver">#228b22

		<td class=c style="background:silver">34,139,34

	<tr>
		<td class=c style="background:fuchsia">&nbsp;

		<td class=c style="background:#ff00ff">&nbsp;

		<td><dfn id=fuchsia0>fuchsia</dfn>

		<td class=c style="background:silver">#ff00ff

		<td class=c style="background:silver">255,0,255

	<tr>
		<td class=c style="background:gainsboro">&nbsp;

		<td class=c style="background:#dcdcdc">&nbsp;

		<td><dfn id=gainsboro>gainsboro</dfn>

		<td class=c style="background:silver">#dcdcdc

		<td class=c style="background:silver">220,220,220

	<tr>
		<td class=c style="background:ghostwhite">&nbsp;

		<td class=c style="background:#f8f8ff">&nbsp;

		<td><dfn id=ghostwhite>ghostwhite</dfn>

		<td class=c style="background:silver">#f8f8ff

		<td class=c style="background:silver">248,248,255

	<tr>
		<td class=c style="background:gold">&nbsp;

		<td class=c style="background:#ffd700">&nbsp;

		<td><dfn id=gold>gold</dfn>

		<td class=c style="background:silver">#ffd700

		<td class=c style="background:silver">255,215,0

	<tr>
		<td class=c style="background:goldenrod">&nbsp;

		<td class=c style="background:#daa520">&nbsp;

		<td><dfn id=goldenrod>goldenrod</dfn>

		<td class=c style="background:silver">#daa520

		<td class=c style="background:silver">218,165,32

	<tr>
		<td class=c style="background:gray">&nbsp;

		<td class=c style="background:#808080">&nbsp;

		<td><dfn id=gray0>gray</dfn>

		<td class=c style="background:silver">#808080

		<td class=c style="background:silver">128,128,128

	<tr>
		<td class=c style="background:green">&nbsp;

		<td class=c style="background:#008000">&nbsp;

		<td><dfn id=green0>green</dfn>

		<td class=c style="background:silver">#008000

		<td class=c style="background:silver">0,128,0

	<tr>
		<td class=c style="background:greenyellow">&nbsp;

		<td class=c style="background:#adff2f">&nbsp;

		<td><dfn id=greenyellow>greenyellow</dfn>

		<td class=c style="background:silver">#adff2f

		<td class=c style="background:silver">173,255,47

	<tr>
		<td class=c style="background:grey">&nbsp;

		<td class=c style="background:#808080">&nbsp;

		<td><dfn id=grey>grey</dfn>

		<td class=c style="background:silver">#808080

		<td class=c style="background:silver">128,128,128

	<tr>
		<td class=c style="background:honeydew">&nbsp;

		<td class=c style="background:#f0fff0">&nbsp;

		<td><dfn id=honeydew>honeydew</dfn>

		<td class=c style="background:silver">#f0fff0

		<td class=c style="background:silver">240,255,240

	<tr>
		<td class=c style="background:hotpink">&nbsp;

		<td class=c style="background:#ff69b4">&nbsp;

		<td><dfn id=hotpink>hotpink</dfn>

		<td class=c style="background:silver">#ff69b4

		<td class=c style="background:silver">255,105,180

	<tr>
		<td class=c style="background:indianred">&nbsp;

		<td class=c style="background:#cd5c5c">&nbsp;

		<td><dfn id=indianred>indianred</dfn>

		<td class=c style="background:silver">#cd5c5c

		<td class=c style="background:silver">205,92,92

	<tr>
		<td class=c style="background:indigo">&nbsp;

		<td class=c style="background:#4b0082">&nbsp;

		<td><dfn id=indigo>indigo</dfn>

		<td class=c style="background:silver">#4b0082

		<td class=c style="background:silver">75,0,130

	<tr>
		<td class=c style="background:ivory">&nbsp;

		<td class=c style="background:#fffff0">&nbsp;

		<td><dfn id=ivory>ivory</dfn>

		<td class=c style="background:silver">#fffff0

		<td class=c style="background:silver">255,255,240

	<tr>
		<td class=c style="background:khaki">&nbsp;

		<td class=c style="background:#f0e68c">&nbsp;

		<td><dfn id=khaki>khaki</dfn>

		<td class=c style="background:silver">#f0e68c

		<td class=c style="background:silver">240,230,140

	<tr>
		<td class=c style="background:lavender">&nbsp;

		<td class=c style="background:#e6e6fa">&nbsp;

		<td><dfn id=lavender>lavender</dfn>

		<td class=c style="background:silver">#e6e6fa

		<td class=c style="background:silver">230,230,250

	<tr>
		<td class=c style="background:lavenderblush">&nbsp;

		<td class=c style="background:#fff0f5">&nbsp;

		<td><dfn id=lavenderblush>lavenderblush</dfn>

		<td class=c style="background:silver">#fff0f5

		<td class=c style="background:silver">255,240,245

	<tr>
		<td class=c style="background:lawngreen">&nbsp;

		<td class=c style="background:#7cfc00">&nbsp;

		<td><dfn id=lawngreen>lawngreen</dfn>

		<td class=c style="background:silver">#7cfc00

		<td class=c style="background:silver">124,252,0

	<tr>
		<td class=c style="background:lemonchiffon">&nbsp;

		<td class=c style="background:#fffacd">&nbsp;

		<td><dfn id=lemonchiffon>lemonchiffon</dfn>

		<td class=c style="background:silver">#fffacd

		<td class=c style="background:silver">255,250,205

	<tr>
		<td class=c style="background:lightblue">&nbsp;

		<td class=c style="background:#add8e6">&nbsp;

		<td><dfn id=lightblue>lightblue</dfn>

		<td class=c style="background:silver">#add8e6

		<td class=c style="background:silver">173,216,230

	<tr>
		<td class=c style="background:lightcoral">&nbsp;

		<td class=c style="background:#f08080">&nbsp;

		<td><dfn id=lightcoral>lightcoral</dfn>

		<td class=c style="background:silver">#f08080

		<td class=c style="background:silver">240,128,128

	<tr>
		<td class=c style="background:lightcyan">&nbsp;

		<td class=c style="background:#e0ffff">&nbsp;

		<td><dfn id=lightcyan>lightcyan</dfn>

		<td class=c style="background:silver">#e0ffff

		<td class=c style="background:silver">224,255,255

	<tr>
		<td class=c style="background:lightgoldenrodyellow">&nbsp;

		<td class=c style="background:#fafad2">&nbsp;

		<td><dfn id=lightgoldenrodyellow>lightgoldenrodyellow</dfn>

		<td class=c style="background:silver">#fafad2

		<td class=c style="background:silver">250,250,210

	<tr>
		<td class=c style="background:lightgray">&nbsp;

		<td class=c style="background:#d3d3d3">&nbsp;

		<td><dfn id=lightgray>lightgray</dfn>

		<td class=c style="background:silver">#d3d3d3

		<td class=c style="background:silver">211,211,211

	<tr>
		<td class=c style="background:lightgreen">&nbsp;

		<td class=c style="background:#90ee90">&nbsp;

		<td><dfn id=lightgreen>lightgreen</dfn>

		<td class=c style="background:silver">#90ee90

		<td class=c style="background:silver">144,238,144

	<tr>
		<td class=c style="background:lightgrey">&nbsp;

		<td class=c style="background:#d3d3d3">&nbsp;

		<td><dfn id=lightgrey>lightgrey</dfn>

		<td class=c style="background:silver">#d3d3d3

		<td class=c style="background:silver">211,211,211

	<tr>
		<td class=c style="background:lightpink">&nbsp;

		<td class=c style="background:#ffb6c1">&nbsp;

		<td><dfn id=lightpink>lightpink</dfn>

		<td class=c style="background:silver">#ffb6c1

		<td class=c style="background:silver">255,182,193

	<tr>
		<td class=c style="background:lightsalmon">&nbsp;

		<td class=c style="background:#ffa07a">&nbsp;

		<td><dfn id=lightsalmon>lightsalmon</dfn>

		<td class=c style="background:silver">#ffa07a

		<td class=c style="background:silver">255,160,122

	<tr>
		<td class=c style="background:lightseagreen">&nbsp;

		<td class=c style="background:#20b2aa">&nbsp;

		<td><dfn id=lightseagreen>lightseagreen</dfn>

		<td class=c style="background:silver">#20b2aa

		<td class=c style="background:silver">32,178,170

	<tr>
		<td class=c style="background:lightskyblue">&nbsp;

		<td class=c style="background:#87cefa">&nbsp;

		<td><dfn id=lightskyblue>lightskyblue</dfn>

		<td class=c style="background:silver">#87cefa

		<td class=c style="background:silver">135,206,250

	<tr>
		<td class=c style="background:lightslategray">&nbsp;

		<td class=c style="background:#778899">&nbsp;

		<td><dfn id=lightslategray>lightslategray</dfn>

		<td class=c style="background:silver">#778899

		<td class=c style="background:silver">119,136,153

	<tr>
		<td class=c style="background:lightslategrey">&nbsp;

		<td class=c style="background:#778899">&nbsp;

		<td><dfn id=lightslategrey>lightslategrey</dfn>

		<td class=c style="background:silver">#778899

		<td class=c style="background:silver">119,136,153

	<tr>
		<td class=c style="background:lightsteelblue">&nbsp;

		<td class=c style="background:#b0c4de">&nbsp;

		<td><dfn id=lightsteelblue>lightsteelblue</dfn>

		<td class=c style="background:silver">#b0c4de

		<td class=c style="background:silver">176,196,222

	<tr>
		<td class=c style="background:lightyellow">&nbsp;

		<td class=c style="background:#ffffe0">&nbsp;

		<td><dfn id=lightyellow>lightyellow</dfn>

		<td class=c style="background:silver">#ffffe0

		<td class=c style="background:silver">255,255,224

	<tr>
		<td class=c style="background:lime">&nbsp;

		<td class=c style="background:#00ff00">&nbsp;

		<td><dfn id=lime0>lime</dfn>

		<td class=c style="background:silver">#00ff00

		<td class=c style="background:silver">0,255,0

	<tr>
		<td class=c style="background:limegreen">&nbsp;

		<td class=c style="background:#32cd32">&nbsp;

		<td><dfn id=limegreen>limegreen</dfn>

		<td class=c style="background:silver">#32cd32

		<td class=c style="background:silver">50,205,50

	<tr>
		<td class=c style="background:linen">&nbsp;

		<td class=c style="background:#faf0e6">&nbsp;

		<td><dfn id=linen>linen</dfn>

		<td class=c style="background:silver">#faf0e6

		<td class=c style="background:silver">250,240,230

	<tr>
		<td class=c style="background:magenta">&nbsp;

		<td class=c style="background:#ff00ff">&nbsp;

		<td><dfn id=magenta>magenta</dfn>

		<td class=c style="background:silver">#ff00ff

		<td class=c style="background:silver">255,0,255

	<tr>
		<td class=c style="background:maroon">&nbsp;

		<td class=c style="background:#800000">&nbsp;

		<td><dfn id=maroon0>maroon</dfn>

		<td class=c style="background:silver">#800000

		<td class=c style="background:silver">128,0,0

	<tr>
		<td class=c style="background:mediumaquamarine">&nbsp;

		<td class=c style="background:#66cdaa">&nbsp;

		<td><dfn id=mediumaquamarine>mediumaquamarine</dfn>

		<td class=c style="background:silver">#66cdaa

		<td class=c style="background:silver">102,205,170

	<tr>
		<td class=c style="background:mediumblue">&nbsp;

		<td class=c style="background:#0000cd">&nbsp;

		<td><dfn id=mediumblue>mediumblue</dfn>

		<td class=c style="background:silver">#0000cd

		<td class=c style="background:silver">0,0,205

	<tr>
		<td class=c style="background:mediumorchid">&nbsp;

		<td class=c style="background:#ba55d3">&nbsp;

		<td><dfn id=mediumorchid>mediumorchid</dfn>

		<td class=c style="background:silver">#ba55d3

		<td class=c style="background:silver">186,85,211

	<tr>
		<td class=c style="background:mediumpurple">&nbsp;

		<td class=c style="background:#9370db">&nbsp;

		<td><dfn id=mediumpurple>mediumpurple</dfn>

		<td class=c style="background:silver">#9370db

		<td class=c style="background:silver">147,112,219

	<tr>
		<td class=c style="background:mediumseagreen">&nbsp;

		<td class=c style="background:#3cb371">&nbsp;

		<td><dfn id=mediumseagreen>mediumseagreen</dfn>

		<td class=c style="background:silver">#3cb371

		<td class=c style="background:silver">60,179,113

	<tr>
		<td class=c style="background:mediumslateblue">&nbsp;

		<td class=c style="background:#7b68ee">&nbsp;

		<td><dfn id=mediumslateblue>mediumslateblue</dfn>

		<td class=c style="background:silver">#7b68ee

		<td class=c style="background:silver">123,104,238

	<tr>
		<td class=c style="background:mediumspringgreen">&nbsp;

		<td class=c style="background:#00fa9a">&nbsp;

		<td><dfn id=mediumspringgreen>mediumspringgreen</dfn>

		<td class=c style="background:silver">#00fa9a

		<td class=c style="background:silver">0,250,154

	<tr>
		<td class=c style="background:mediumturquoise">&nbsp;

		<td class=c style="background:#48d1cc">&nbsp;

		<td><dfn id=mediumturquoise>mediumturquoise</dfn>

		<td class=c style="background:silver">#48d1cc

		<td class=c style="background:silver">72,209,204

	<tr>
		<td class=c style="background:mediumvioletred">&nbsp;

		<td class=c style="background:#c71585">&nbsp;

		<td><dfn id=mediumvioletred>mediumvioletred</dfn>

		<td class=c style="background:silver">#c71585

		<td class=c style="background:silver">199,21,133

	<tr>
		<td class=c style="background:midnightblue">&nbsp;

		<td class=c style="background:#191970">&nbsp;

		<td><dfn id=midnightblue>midnightblue</dfn>

		<td class=c style="background:silver">#191970

		<td class=c style="background:silver">25,25,112

	<tr>
		<td class=c style="background:mintcream">&nbsp;

		<td class=c style="background:#f5fffa">&nbsp;

		<td><dfn id=mintcream>mintcream</dfn>

		<td class=c style="background:silver">#f5fffa

		<td class=c style="background:silver">245,255,250

	<tr>
		<td class=c style="background:mistyrose">&nbsp;

		<td class=c style="background:#ffe4e1">&nbsp;

		<td><dfn id=mistyrose>mistyrose</dfn>

		<td class=c style="background:silver">#ffe4e1

		<td class=c style="background:silver">255,228,225

	<tr>
		<td class=c style="background:moccasin">&nbsp;

		<td class=c style="background:#ffe4b5">&nbsp;

		<td><dfn id=moccasin>moccasin</dfn>

		<td class=c style="background:silver">#ffe4b5

		<td class=c style="background:silver">255,228,181

	<tr>
		<td class=c style="background:navajowhite">&nbsp;

		<td class=c style="background:#ffdead">&nbsp;

		<td><dfn id=navajowhite>navajowhite</dfn>

		<td class=c style="background:silver">#ffdead

		<td class=c style="background:silver">255,222,173

	<tr>
		<td class=c style="background:navy">&nbsp;

		<td class=c style="background:#000080">&nbsp;

		<td><dfn id=navy0>navy</dfn>

		<td class=c style="background:silver">#000080

		<td class=c style="background:silver">0,0,128

	<tr>
		<td class=c style="background:oldlace">&nbsp;

		<td class=c style="background:#fdf5e6">&nbsp;

		<td><dfn id=oldlace>oldlace</dfn>

		<td class=c style="background:silver">#fdf5e6

		<td class=c style="background:silver">253,245,230

	<tr>
		<td class=c style="background:olive">&nbsp;

		<td class=c style="background:#808000">&nbsp;

		<td><dfn id=olive0>olive</dfn>

		<td class=c style="background:silver">#808000

		<td class=c style="background:silver">128,128,0

	<tr>
		<td class=c style="background:olivedrab">&nbsp;

		<td class=c style="background:#6b8e23">&nbsp;

		<td><dfn id=olivedrab>olivedrab</dfn>

		<td class=c style="background:silver">#6b8e23

		<td class=c style="background:silver">107,142,35

	<tr>
		<td class=c style="background:orange">&nbsp;

		<td class=c style="background:#ffa500">&nbsp;

		<td><dfn id=orange>orange</dfn>

		<td class=c style="background:silver">#ffa500

		<td class=c style="background:silver">255,165,0

	<tr>
		<td class=c style="background:orangered">&nbsp;

		<td class=c style="background:#ff4500">&nbsp;

		<td><dfn id=orangered>orangered</dfn>

		<td class=c style="background:silver">#ff4500

		<td class=c style="background:silver">255,69,0

	<tr>
		<td class=c style="background:orchid">&nbsp;

		<td class=c style="background:#da70d6">&nbsp;

		<td><dfn id=orchid>orchid</dfn>

		<td class=c style="background:silver">#da70d6

		<td class=c style="background:silver">218,112,214

	<tr>
		<td class=c style="background:palegoldenrod">&nbsp;

		<td class=c style="background:#eee8aa">&nbsp;

		<td><dfn id=palegoldenrod>palegoldenrod</dfn>

		<td class=c style="background:silver">#eee8aa

		<td class=c style="background:silver">238,232,170

	<tr>
		<td class=c style="background:palegreen">&nbsp;

		<td class=c style="background:#98fb98">&nbsp;

		<td><dfn id=palegreen>palegreen</dfn>

		<td class=c style="background:silver">#98fb98

		<td class=c style="background:silver">152,251,152

	<tr>
		<td class=c style="background:paleturquoise">&nbsp;

		<td class=c style="background:#afeeee">&nbsp;

		<td><dfn id=paleturquoise>paleturquoise</dfn>

		<td class=c style="background:silver">#afeeee

		<td class=c style="background:silver">175,238,238

	<tr>
		<td class=c style="background:palevioletred">&nbsp;

		<td class=c style="background:#db7093">&nbsp;

		<td><dfn id=palevioletred>palevioletred</dfn>

		<td class=c style="background:silver">#db7093

		<td class=c style="background:silver">219,112,147

	<tr>
		<td class=c style="background:papayawhip">&nbsp;

		<td class=c style="background:#ffefd5">&nbsp;

		<td><dfn id=papayawhip>papayawhip</dfn>

		<td class=c style="background:silver">#ffefd5

		<td class=c style="background:silver">255,239,213

	<tr>
		<td class=c style="background:peachpuff">&nbsp;

		<td class=c style="background:#ffdab9">&nbsp;

		<td><dfn id=peachpuff>peachpuff</dfn>

		<td class=c style="background:silver">#ffdab9

		<td class=c style="background:silver">255,218,185

	<tr>
		<td class=c style="background:peru">&nbsp;

		<td class=c style="background:#cd853f">&nbsp;

		<td><dfn id=peru>peru</dfn>

		<td class=c style="background:silver">#cd853f

		<td class=c style="background:silver">205,133,63

	<tr>
		<td class=c style="background:pink">&nbsp;

		<td class=c style="background:#ffc0cb">&nbsp;

		<td><dfn id=pink>pink</dfn>

		<td class=c style="background:silver">#ffc0cb

		<td class=c style="background:silver">255,192,203

	<tr>
		<td class=c style="background:plum">&nbsp;

		<td class=c style="background:#dda0dd">&nbsp;

		<td><dfn id=plum>plum</dfn>

		<td class=c style="background:silver">#dda0dd

		<td class=c style="background:silver">221,160,221

	<tr>
		<td class=c style="background:powderblue">&nbsp;

		<td class=c style="background:#b0e0e6">&nbsp;

		<td><dfn id=powderblue>powderblue</dfn>

		<td class=c style="background:silver">#b0e0e6

		<td class=c style="background:silver">176,224,230

	<tr>
		<td class=c style="background:purple">&nbsp;

		<td class=c style="background:#800080">&nbsp;

		<td><dfn id=purple0>purple</dfn>

		<td class=c style="background:silver">#800080

		<td class=c style="background:silver">128,0,128

	<tr>
		<td class=c style="background:red">&nbsp;

		<td class=c style="background:#ff0000">&nbsp;

		<td><dfn id=red0>red</dfn>

		<td class=c style="background:silver">#ff0000

		<td class=c style="background:silver">255,0,0

	<tr>
		<td class=c style="background:rosybrown">&nbsp;

		<td class=c style="background:#bc8f8f">&nbsp;

		<td><dfn id=rosybrown>rosybrown</dfn>

		<td class=c style="background:silver">#bc8f8f

		<td class=c style="background:silver">188,143,143

	<tr>
		<td class=c style="background:royalblue">&nbsp;

		<td class=c style="background:#4169e1">&nbsp;

		<td><dfn id=royalblue>royalblue</dfn>

		<td class=c style="background:silver">#4169e1

		<td class=c style="background:silver">65,105,225

	<tr>
		<td class=c style="background:saddlebrown">&nbsp;

		<td class=c style="background:#8b4513">&nbsp;

		<td><dfn id=saddlebrown>saddlebrown</dfn>

		<td class=c style="background:silver">#8b4513

		<td class=c style="background:silver">139,69,19

	<tr>
		<td class=c style="background:salmon">&nbsp;

		<td class=c style="background:#fa8072">&nbsp;

		<td><dfn id=salmon>salmon</dfn>

		<td class=c style="background:silver">#fa8072

		<td class=c style="background:silver">250,128,114

	<tr>
		<td class=c style="background:sandybrown">&nbsp;

		<td class=c style="background:#f4a460">&nbsp;

		<td><dfn id=sandybrown>sandybrown</dfn>

		<td class=c style="background:silver">#f4a460

		<td class=c style="background:silver">244,164,96

	<tr>
		<td class=c style="background:seagreen">&nbsp;

		<td class=c style="background:#2e8b57">&nbsp;

		<td><dfn id=seagreen>seagreen</dfn>

		<td class=c style="background:silver">#2e8b57

		<td class=c style="background:silver">46,139,87

	<tr>
		<td class=c style="background:seashell">&nbsp;

		<td class=c style="background:#fff5ee">&nbsp;

		<td><dfn id=seashell>seashell</dfn>

		<td class=c style="background:silver">#fff5ee

		<td class=c style="background:silver">255,245,238

	<tr>
		<td class=c style="background:sienna">&nbsp;

		<td class=c style="background:#a0522d">&nbsp;

		<td><dfn id=sienna>sienna</dfn>

		<td class=c style="background:silver">#a0522d

		<td class=c style="background:silver">160,82,45

	<tr>
		<td class=c style="background:silver">&nbsp;

		<td class=c style="background:#c0c0c0">&nbsp;

		<td><dfn id=silver0>silver</dfn>

		<td class=c style="background:silver">#c0c0c0

		<td class=c style="background:silver">192,192,192

	<tr>
		<td class=c style="background:skyblue">&nbsp;

		<td class=c style="background:#87ceeb">&nbsp;

		<td><dfn id=skyblue>skyblue</dfn>

		<td class=c style="background:silver">#87ceeb

		<td class=c style="background:silver">135,206,235

	<tr>
		<td class=c style="background:slateblue">&nbsp;

		<td class=c style="background:#6a5acd">&nbsp;

		<td><dfn id=slateblue>slateblue</dfn>

		<td class=c style="background:silver">#6a5acd

		<td class=c style="background:silver">106,90,205

	<tr>
		<td class=c style="background:slategray">&nbsp;

		<td class=c style="background:#708090">&nbsp;

		<td><dfn id=slategray>slategray</dfn>

		<td class=c style="background:silver">#708090

		<td class=c style="background:silver">112,128,144

	<tr>
		<td class=c style="background:slategrey">&nbsp;

		<td class=c style="background:#708090">&nbsp;

		<td><dfn id=slategrey>slategrey</dfn>

		<td class=c style="background:silver">#708090

		<td class=c style="background:silver">112,128,144

	<tr>
		<td class=c style="background:snow">&nbsp;

		<td class=c style="background:#fffafa">&nbsp;

		<td><dfn id=snow>snow</dfn>

		<td class=c style="background:silver">#fffafa

		<td class=c style="background:silver">255,250,250

	<tr>
		<td class=c style="background:springgreen">&nbsp;

		<td class=c style="background:#00ff7f">&nbsp;

		<td><dfn id=springgreen>springgreen</dfn>

		<td class=c style="background:silver">#00ff7f

		<td class=c style="background:silver">0,255,127

	<tr>
		<td class=c style="background:steelblue">&nbsp;

		<td class=c style="background:#4682b4">&nbsp;

		<td><dfn id=steelblue>steelblue</dfn>

		<td class=c style="background:silver">#4682b4

		<td class=c style="background:silver">70,130,180

	<tr>
		<td class=c style="background:tan">&nbsp;

		<td class=c style="background:#d2b48c">&nbsp;

		<td><dfn id=tan>tan</dfn>

		<td class=c style="background:silver">#d2b48c

		<td class=c style="background:silver">210,180,140

	<tr>
		<td class=c style="background:teal">&nbsp;

		<td class=c style="background:#008080">&nbsp;

		<td><dfn id=teal0>teal</dfn>

		<td class=c style="background:silver">#008080

		<td class=c style="background:silver">0,128,128

	<tr>
		<td class=c style="background:thistle">&nbsp;

		<td class=c style="background:#d8bfd8">&nbsp;

		<td><dfn id=thistle>thistle</dfn>

		<td class=c style="background:silver">#d8bfd8

		<td class=c style="background:silver">216,191,216

	<tr>
		<td class=c style="background:tomato">&nbsp;

		<td class=c style="background:#ff6347">&nbsp;

		<td><dfn id=tomato>tomato</dfn>

		<td class=c style="background:silver">#ff6347

		<td class=c style="background:silver">255,99,71

	<tr>
		<td class=c style="background:turquoise">&nbsp;

		<td class=c style="background:#40e0d0">&nbsp;

		<td><dfn id=turquoise>turquoise</dfn>

		<td class=c style="background:silver">#40e0d0

		<td class=c style="background:silver">64,224,208

	<tr>
		<td class=c style="background:violet">&nbsp;

		<td class=c style="background:#ee82ee">&nbsp;

		<td><dfn id=violet>violet</dfn>

		<td class=c style="background:silver">#ee82ee

		<td class=c style="background:silver">238,130,238

	<tr>
		<td class=c style="background:wheat">&nbsp;

		<td class=c style="background:#f5deb3">&nbsp;

		<td><dfn id=wheat>wheat</dfn>

		<td class=c style="background:silver">#f5deb3

		<td class=c style="background:silver">245,222,179

	<tr>
		<td class=c style="background:white">&nbsp;

		<td class=c style="background:#ffffff">&nbsp;

		<td><dfn id=white0>white</dfn>

		<td class=c style="background:silver">#ffffff

		<td class=c style="background:silver">255,255,255

	<tr>
		<td class=c style="background:whitesmoke">&nbsp;

		<td class=c style="background:#f5f5f5">&nbsp;

		<td><dfn id=whitesmoke>whitesmoke</dfn>

		<td class=c style="background:silver">#f5f5f5

		<td class=c style="background:silver">245,245,245

	<tr>
		<td class=c style="background:yellow">&nbsp;

		<td class=c style="background:#ffff00">&nbsp;

		<td><dfn id=yellow0>yellow</dfn>

		<td class=c style="background:silver">#ffff00

		<td class=c style="background:silver">255,255,0

	<tr>
		<td class=c style="background:yellowgreen">&nbsp;

		<td class=c style="background:#9acd32">&nbsp;

		<td><dfn id=yellowgreen>yellowgreen</dfn>

		<td class=c style="background:silver">#9acd32

		<td class=c style="background:silver">154,205,50
</table>

<h3 id=currentcolor><span class=secno>4.4. </span>&lsquo;<a
		href="#currentColor-def"><code class=css>currentColor</code></a>&rsquo;
	color keyword</h3>

<p>CSS1 and CSS2 defined the initial value of <a
		href="http://www.w3.org/TR/REC-CSS1#border-color">the &lsquo;<code
		class=property>border-color</code>&rsquo; property</a> to be <q
		cite="http://www.w3.org/TR/REC-CSS1#border-color">the value of the
	&lsquo;<a href="#color0"><code class=property>color</code></a>&rsquo;
	property</q> but did not define a corresponding keyword. This omission was
	recognized by SVG, and thus <a
			href="http://www.w3.org/TR/SVG/color.html#ColorProperty">SVG 1.0
		introduced the &lsquo;<code class=css>currentColor</code>&rsquo; value</a>
	for the &lsquo;<code class=property>fill</code>&rsquo;, &lsquo;<code
			class=property>stroke</code>&rsquo;, &lsquo;<code
			class=property>stop-color</code>&rsquo;, &lsquo;<code
			class=property>flood-color</code>&rsquo;, and &lsquo;<code
			class=property>lighting-color</code>&rsquo; properties. CSS3 extends the
	color value to include the &lsquo;<a href="#currentColor-def"><code
			class=css>currentColor</code></a>&rsquo; keyword to allow its use with all
	properties that accept a &lt;color&gt; value. This simplifies the
	definition of those properties in CSS3.

<dl>
	<dt><dfn id=currentColor-def>currentColor</dfn>

	<dd>The value of the &lsquo;<a href="#color0"><code
			class=property>color</code></a>&rsquo; property. The computed value of
		the &lsquo;<a href="#currentColor-def"><code
				class=css>currentColor</code></a>&rsquo; keyword is the computed value of
		the &lsquo;<a href="#color0"><code class=property>color</code></a>&rsquo;
		property. If the &lsquo;<a href="#currentColor-def"><code
				class=css>currentColor</code></a>&rsquo; keyword is set on the &lsquo;<a
				href="#color0"><code class=property>color</code></a>&rsquo; property
		itself, it is treated as &lsquo;<code class=css>color:
			inherit</code>&rsquo;.
</dl>

<h3 id=css-system><span class=secno>4.5. </span>CSS system colors</h3>

<h4 id=css2-system><span class=secno>4.5.1. </span>CSS2 system colors</h4>

<p><strong>Deprecated.</strong> <span class=index-def id=system-colors-def
									  title="system colors">In addition to being able to assign color keyword
   values to text, backgrounds, etc., <a
			href="http://www.w3.org/TR/REC-CSS2/ui.html#system-colors">CSS2</a>
   allowed authors to specify colors in a manner that integrated them into
   the user's graphic environment.</span>

<p>For systems that do not have a corresponding value, the specified value
	should be mapped to the nearest system color value, or to a default color.
	Note that some profiles of CSS may not support System Colors at all.

<p>The following lists additional values for color-related CSS values and
	their general meaning. Any color property can take one of the following
	names. Although these are case-insensitive, it is recommended that the
	mixed capitalization shown below be used, to make the names more legible.

<dl>
	<dt><dfn id=activeborder>ActiveBorder</dfn>

	<dd>Active window border.

	<dt><dfn id=activecaption>ActiveCaption</dfn>

	<dd>Active window caption.

	<dt><dfn id=appworkspace>AppWorkspace</dfn>

	<dd>Background color of multiple document interface.

	<dt><dfn id=background>Background</dfn>

	<dd>Desktop background.

	<dt><dfn id=buttonface>ButtonFace</dfn>

	<dd>The face background color for 3-D elements that appear 3-D due to one
		layer of surrounding border.

	<dt><dfn id=buttonhighlight>ButtonHighlight</dfn>

	<dd>The color of the border facing the light source for 3-D elements that
		appear 3-D due to one layer of surrounding border.

	<dt><dfn id=buttonshadow>ButtonShadow</dfn>

	<dd>The color of the border away from the light source for 3-D elements
		that appear 3-D due to one layer of surrounding border.

	<dt><dfn id=buttontext>ButtonText</dfn>

	<dd>Text on push buttons.

	<dt><dfn id=captiontext>CaptionText</dfn>

	<dd>Text in caption, size box, and scrollbar arrow box.

	<dt><dfn id=graytext>GrayText</dfn>

	<dd>Grayed (disabled) text. This color is set to #000 if the current
		display driver does not support a solid gray color.

	<dt><dfn id=highlight>Highlight</dfn>

	<dd>Item(s) selected in a control.

	<dt><dfn id=highlighttext>HighlightText</dfn>

	<dd>Text of item(s) selected in a control.

	<dt><dfn id=inactiveborder>InactiveBorder</dfn>

	<dd>Inactive window border.

	<dt><dfn id=inactivecaption>InactiveCaption</dfn>

	<dd>Inactive window caption.

	<dt><dfn id=inactivecaptiontext>InactiveCaptionText</dfn>

	<dd>Color of text in an inactive caption.

	<dt><dfn id=infobackground>InfoBackground</dfn>

	<dd>Background color for tooltip controls.

	<dt><dfn id=infotext>InfoText</dfn>

	<dd>Text color for tooltip controls.

	<dt><dfn id=menu>Menu</dfn>

	<dd>Menu background.

	<dt><dfn id=menutext>MenuText</dfn>

	<dd>Text in menus.

	<dt><dfn id=scrollbar>Scrollbar</dfn>

	<dd>Scroll bar gray area.

	<dt><dfn id=threeddarkshadow>ThreeDDarkShadow</dfn>

	<dd>The color of the darker (generally outer) of the two borders away from
		the light source for 3-D elements that appear 3-D due to two concentric
		layers of surrounding border.

	<dt><dfn id=threedface>ThreeDFace</dfn>

	<dd>The face background color for 3-D elements that appear 3-D due to two
		concentric layers of surrounding border.

	<dt><dfn id=threedhighlight>ThreeDHighlight</dfn>

	<dd>The color of the lighter (generally outer) of the two borders facing
		the light source for 3-D elements that appear 3-D due to two concentric
		layers of surrounding border.

	<dt><dfn id=threedlightshadow>ThreeDLightShadow</dfn>

	<dd>The color of the darker (generally inner) of the two borders facing
		the light source for 3-D elements that appear 3-D due to two concentric
		layers of surrounding border.

	<dt><dfn id=threedshadow>ThreeDShadow</dfn>

	<dd>The color of the lighter (generally inner) of the two borders away
		from the light source for 3-D elements that appear 3-D due to two
		concentric layers of surrounding border.

	<dt><dfn id=window>Window</dfn>

	<dd>Window background.

	<dt><dfn id=windowframe>WindowFrame</dfn>

	<dd>Window frame.

	<dt><dfn id=windowtext>WindowText</dfn>

	<dd>Text in windows.
</dl>

<div class="example deprecated-example">
	<p style="display:none">DEPRECATED EXAMPLE(S):

	<p> For example, to set the foreground and background colors of a
		paragraph to the same foreground and background colors of the user's
		window, write the following:</p>

   <pre>
p { color: WindowText; background-color: Window }
</pre>
</div>

<p class=note><strong>Note.</strong> The CSS2 System Color values have been
	deprecated in favor of the CSS3 UI &lsquo;<code class=css><a
			class=index-inst href="http://www.w3.org/TR/css3-ui/#appearance"
			id=appearance>appearance</a></code>&rsquo; property. If you want to
	emulate the look of a user interface related element or control, please
	use the &lsquo;<code class=property>appearance</code>&rsquo; property
	instead of attempting to mimic a user interface element through a
	combination of system colors.

<h3 id=notes><span class=secno>4.6. </span>Notes on using colors</h3>

<p>Although colors can add significant amounts of information to document
	and make them more readable, please consider the W3C Web Content
	Accessibility Guidelines <a href="#WCAG20"
								rel=biblioentry>[WCAG20]<!--{{WCAG20}}--></a> when including color in your
	documents.

<ul>
	<li><a
			href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-without-color"><em>1.4.1
		Use of Color:</em> Color is not used as the only visual means of
		conveying information, indicating an action, prompting a response, or
		distinguishing a visual element</a>
</ul>

<h2 id=alpha><span class=secno>5. </span>Simple alpha compositing</h2>

<p>When drawing, implementations must <span class=index-def
											id=compositing-def title=compositing>handle alpha</span> according to the
	rules in <a
			href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending">Section
		14.2 Simple alpha compositing</a> of <a href="#SVG11"
												rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>. (If the &lsquo;<code
			class=css><span class=index-inst
							id=color-interpolation>color-interpolation</span></code>&rsquo; or
	&lsquo;<code class=css><span class=index-inst
								 id=color-rendering>color-rendering</span></code>&rsquo; properties
	mentioned in that section are not implemented or do not apply,
	implementations must act as though they have their initial values.)

<h2 id=sample><span class=secno>6. </span>Sample style sheet for (X)HTML</h2>

<p>This appendix is informative, not normative. This style sheet could be
	used by an implementation as part of its default styling of HTML4, XHTML1,
	XHTML1.1, XHTML Basic, and other XHTML Family documents.

  <pre>
html { 
	color: black;
	background: white;
}


/* traditional desktop user agent colors for hyperlinks */
:link    { color: blue; }   
:visited { color: purple; }

/* default focus outline */
:focus {
	outline: 1px dotted;  /* or 1px dotted invert */
}
</pre>

<h2 id=profiles><span class=secno>7. </span>Profiles</h2>

<p>Each specification using <span class=modulename>CSS3 Color</span> must
	define the subset of CSS3 Color features it allows and excludes, and
	describe the local meaning of all the components of that subset.

<p>Non normative examples:

<div class=profile>
	<table border=1 class=tprofile width="75%">
		<tbody>
		<tr>
			<th class=title colspan=2><span class=modulename>CSS3 Color</span>
				profile

		<tr>
			<th>Specification

				<td>HTML4

		<tr>
			<th>Accepts

				<td>Basic color keywords <br>
					RGB six digit hex color values

		<tr>
			<th>Excludes

				<td> &lsquo;<a href="#color0"><code
						class=property>color</code></a>&rsquo; property<br>
					&lsquo;<a href="#opacity"><code
							class=property>opacity</code></a>&rsquo; property<br>
					RGB three digit hex color values and RGB functional notation color
					value<br>
					RGBA color values<br>
					HSL and HSLA color values<br>
					Extended color keywords<br>
					&lsquo;<a href="#currentColor-def"><code
							class=css>currentColor</code></a>&rsquo; color value<br>
					CSS2 UI Colors<br>
					&lsquo;<a href="#transparent-def"><code
							class=css>transparent</code></a>&rsquo; color value

		<tr>
			<th>Extra constraints

			<td>none.
	</table>

	<table border=1 class=tprofile width="75%">
		<tbody>
		<tr>
			<th class=title colspan=2><span class=modulename>CSS3 Color</span>
				profile

		<tr>
			<th>Specification

				<td>CSS level 1

		<tr>
			<th>Accepts

				<td> &lsquo;<a href="#color0"><code
						class=property>color</code></a>&rsquo; property <br>
					Basic color keywords <br>
					RGB color values

		<tr>
			<th>Excludes

				<td> &lsquo;<a href="#opacity"><code
						class=property>opacity</code></a>&rsquo; property<br>
					RGBA color values<br>
					HSL and HSLA color values<br>
					Extended color keywords<br>
					&lsquo;<a href="#currentColor-def"><code
							class=css>currentColor</code></a>&rsquo; color value<br>
					CSS2 UI Colors<br>
					&lsquo;<a href="#transparent-def"><code
							class=css>transparent</code></a>&rsquo; color value

		<tr>
			<th>Extra constraints

			<td>none.
	</table>

	<table border=1 class=tprofile width="75%">
		<tbody>
		<tr>
			<th class=title colspan=2><span class=modulename>CSS3 Color</span>
				profile

		<tr>
			<th>Specification

				<td>CSS level 2

		<tr>
			<th>Accepts

				<td> &lsquo;<a href="#color0"><code
						class=property>color</code></a>&rsquo; property <br>
					Basic color keywords<br>
					RGB color values<br>
					CSS2 UI Colors<br>
					&lsquo;<a href="#transparent-def"><code
							class=css>transparent</code></a>&rsquo; color value

		<tr>
			<th>Excludes

				<td> &lsquo;<a href="#opacity"><code
						class=property>opacity</code></a>&rsquo; property<br>
					RGBA color values<br>
					HSL and HSLA color values<br>
					Extended color keywords<br>
					&lsquo;<a href="#currentColor-def"><code
							class=css>currentColor</code></a>&rsquo; color value

		<tr>
			<th>Extra constraints

			<td>&lsquo;<a href="#transparent-def"><code
					class=css>transparent</code></a>&rsquo; color value not valid for
				&lsquo;<a href="#color0"><code class=property>color</code></a>&rsquo;
				property.<br>
				&lsquo;<a href="#orange"><code class=css>orange</code></a>&rsquo;
				color value (part of Extended color keywords) is accepted in CSS level
				2 revision 1
	</table>

	<table border=1 class=tprofile width="75%">
		<tbody>
		<tr>
			<th class=title colspan=2><span class=modulename>CSS3 Color</span>
				profile

		<tr>
			<th>Specification

				<td>SVG 1.0 and 1.1

		<tr>
			<th>Accepts

				<td> &lsquo;<a href="#color0"><code
						class=property>color</code></a>&rsquo; property<br>
					&lsquo;<a href="#opacity"><code
							class=property>opacity</code></a>&rsquo; property<br>
					Basic color keywords<br>
					RGB color values<br>
					CSS2 UI Colors<br>
					Extended color keywords<br>
					&lsquo;<a href="#currentColor-def"><code
							class=css>currentColor</code></a>&rsquo; color value

		<tr>
			<th>Excludes

				<td> RGBA color values<br>
					HSL and HSLA color values<br>
					&lsquo;<a href="#transparent-def"><code
							class=css>transparent</code></a>&rsquo; color value

		<tr>
			<th>Extra constraints

			<td>&lsquo;<a href="#currentColor-def"><code
					class=css>currentColor</code></a>&rsquo; color value not valid for
				&lsquo;<a href="#color0"><code class=property>color</code></a>&rsquo;
				property.
	</table>
</div>

<h2 id=testsuite><span class=secno>8. </span>Test suite</h2>

<p>A CSS Color Module <a
		href="http://www.w3.org/Style/CSS/Test/CSS3/Color/current/">Test Suite</a> has
	been developed, although further tests may be added. This test suite is
	intended to allow user agents to verify their basic conformance to the
	specification. This test suite does not pretend to be exhaustive and does
	not cover all possible numerical color values. These tests are available
	at <a
			href="http://www.w3.org/Style/CSS/Test/CSS3/Color/current/">http://www.w3.org/Style/CSS/Test/CSS3/Color/current/</a>.


<h2 id=dropped><span class=secno>9. </span>Call for Implementations of
	dropped features</h2>

<p> <!-- named anchors for all of the IDs in the sections containing the
     dropped features -->
	<span id=icc-color></span> <span id=name-1></span> <span
			id=color-profile></span> <span id=renderingintent></span> <span
			id=name-2></span> <span id=rendering-intent></span> <span
			id=atcolorprofile></span> <span id=name-descriptor></span> <span
			id=propdef-color-profile-name></span> <span id=src-descriptor></span>
	<span id=propdef-color-profile-src></span> <span
			id=rendering-intent0></span> <span id=propdef-rendering-intent></span>
	<span id=flavor></span> A number of features that were present in the 14
	May 2003 Candidate Recommendation are no longer present in this
	specification. However, the call for implementations for these features
	remains, and they may be included in a future level of this specification
	given sufficient implementations and a test suite to demonstrate
	interoperability. These features are:

<ul>
	<li><a
			href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#icc-color">ICC
		Color Profile: the &lsquo;<code
				class=property>color-profile</code>&rsquo; property</a>

	<li><a
			href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#renderingintent">The
		&lsquo;<code class=property>rendering-intent</code>&rsquo; property</a>

	<li><a
			href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#atcolorprofile">The
		&lsquo;<code class=css>@color-profile</code>&rsquo; at-rule</a>

	<li><a
			href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#flavor">&lsquo;<code
			class=css>flavor</code>&rsquo; system color</a>
</ul>

<h2 id=acknowledgments><span class=secno>10. </span>Acknowledgments</h2>

<p>Thanks to Brad Pettit both for writing up color-profiles, and for
	implementing it. Thanks to Steven Pemberton for his write up on HSL
	colors. Thanks especially to the feedback from Marc Attinasi, Bert Bos,
	Joe Clark, fantasai, Patrick Garies, Tony Graham, Ian Hickson, Susan
	Lesch, Alex LeDonne, Cameron McCormack, Krzysztof Maczy&#x0144;ski, Chris
	Moschini, Chris Murphy, Christoph P&auml;per, David Perrell, Jacob
	Refstrup, Dave Singer, Jonathan Stanley, Andrew Thompson, Russ Weakley,
	Etan Wexler, David Woolley, Boris Zbarsky, Steve Zilles, the XSL FO
	subgroup of the XSL working group, and all the rest of the <a
			href="http://lists.w3.org/Archives/Public/www-style/">www-style</a>
	community. And thanks to Chris Lilley for being the resident CSS Color
	expert.

<h2 id=changes><span class=secno>11. </span>Changes</h2>

<p>This document differs from the previous, 28 October 2010, Proposed Recommendation
	document as follows: the date, status and styling are updated for W3C Recommendation,
	the references are updated, and this changes appendix lists no substantive changes.

<h2 id=references><span class=secno>12. </span>References</h2>

<h3 id=normative><span class=secno>12.1. </span>Normative</h3>
<!--begin-normative-->
<!-- Sorted by label -->

<dl class=bibliography>
	<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
		<!---->

	<dt id=COLORIMETRY>[COLORIMETRY]

	<dd><cite>Colorimetry, Third Edition.</cite> CIE 15:2004. ISBN
		978-3-901906-33-6</dd>
	<!---->

	<dt id=CSS21>[CSS21]

	<dd>Bert Bos; et al. <a
			href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
		Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June 2011.
		W3C Recommendation.  URL: <a
				href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
	</dd>
	<!---->

	<dt id=SRGB>[SRGB]

	<dd><a href="http://www.colour.org/tc8-05/Docs/colorspace/61966-2-1.pdf"><cite>Multimedia systems and
		equipment - Colour measurement and management - Part 2-1: Colour
		management - Default RGB colour space - sRGB.</cite></a> IEC 61966-2-1
		(1999-10) ISBN: 2-8318-4989-6 - ICS codes: 33.160.60, 37.080 - TC 100 -
		51 pp. as amended by Amendment A1:2003. URL: <a
				href="http://www.colour.org/tc8-05/Docs/colorspace/61966-2-1.pdf">http://www.colour.org/tc8-05/Docs/colorspace/61966-2-1.pdf</a></dd>
	<!---->

	<dt id=SVG11>[SVG11]

	<dd>Jon Ferraiolo et al. <a
			href="http://www.w3.org/TR/2003/REC-SVG11-20030114/"><cite>Scalable Vector
		Graphics (SVG) 1.1.</cite></a> 14 January 2003. W3C Recommendation. URL: <a
			href="http://www.w3.org/TR/2003/REC-SVG11-20030114/">http://www.w3.org/TR/2003/REC-SVG11-20030114/</a>
	</dd>
	<!---->
</dl>
<!--end-normative-->

<h3 id=informative><span class=secno>12.2. </span>Informative</h3>
<!--begin-informative-->
<!-- Sorted by label -->

<dl class=bibliography>
	<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
		<!---->

	<dt id=ABC>[ABC]

	<dd>Leo Geurts; Lambert Meertens; Steven Pemberton. <a
			href="http://www.cwi.nl/~steven/abc"><cite>The ABC Programmer's
		Handbook.</cite></a> Prentice-Hall. ISBN: 0-13-000027-2. URL: <a
			href="http://www.cwi.nl/~steven/abc">http://www.cwi.nl/~steven/abc</a></dd>
	<!---->

	<dt id=CSS2>[CSS2]

	<dd>Ian Jacobs; et al. <a
			href="http://www.w3.org/TR/2008/REC-CSS2-20080411"><cite>Cascading Style
		Sheets, level 2 (CSS2) Specification.</cite></a> 11 April 2008. W3C
		Recommendation. URL: <a
				href="http://www.w3.org/TR/2008/REC-CSS2-20080411">http://www.w3.org/TR/2008/REC-CSS2-20080411</a>
	</dd>
	<!---->

	<dt id=CSS3UI>[CSS3UI]

	<dd>Tantek &#199;elik. <a
			href="http://www.w3.org/TR/2004/CR-css3-ui-20040511"><cite>CSS3 Basic
		User Interface Module.</cite></a> 11 May 2004. W3C Candidate
		Recommendation. (Work in progress.) URL: <a
				href="http://www.w3.org/TR/2004/CR-css3-ui-20040511">http://www.w3.org/TR/2004/CR-css3-ui-20040511</a>
	</dd>
	<!---->

	<dt id=HTML401>[HTML401]

	<dd>David Raggett; Ian Jacobs; Arnaud Le Hors. <a
			href="http://www.w3.org/TR/1999/REC-html401-19991224"><cite>HTML 4.01
		Specification.</cite></a> 24 December 1999. W3C Recommendation. URL: <a
			href="http://www.w3.org/TR/1999/REC-html401-19991224">http://www.w3.org/TR/1999/REC-html401-19991224</a>
	</dd>
	<!---->

	<dt id=OEB101>[OEB101]

	<dd><a
			href="http://www.openebook.org/oebps/oebps1.0.1/download/oeb101-xhtml.htm"><cite>Open
		eBook(tm) Publication Structure 1.0.1.</cite></a> Open eBook Forum(tm).
		02 July 2001. URL: <a
				href="http://www.openebook.org/oebps/oebps1.0.1/download/oeb101-xhtml.htm">http://www.openebook.org/oebps/oebps1.0.1/download/oeb101-xhtml.htm</a>
	</dd>
	<!---->

	<dt id=SVG10>[SVG10]

	<dd>Jon Ferraiolo. <a
			href="http://www.w3.org/TR/2001/REC-SVG-20010904"><cite>Scalable Vector
		Graphics (SVG) 1.0 Specification.</cite></a> 4 September 2001. W3C
		Recommendation. URL: <a
				href="http://www.w3.org/TR/2001/REC-SVG-20010904">http://www.w3.org/TR/2001/REC-SVG-20010904</a>
	</dd>
	<!---->

	<dt id=WCAG20>[WCAG20]

	<dd>Michael Cooper; et al. <a
			href="http://www.w3.org/TR/2008/REC-WCAG20-20081211"><cite>Web Content
		Accessibility Guidelines (WCAG) 2.0.</cite></a> 11 December 2008. W3C
		Recommendation. URL: <a
				href="http://www.w3.org/TR/2008/REC-WCAG20-20081211">http://www.w3.org/TR/2008/REC-WCAG20-20081211</a>
	</dd>
	<!---->

	<dt id=X11COLORS>[X11COLORS]

	<dd><a
			href="http://en.wikipedia.org/wiki/X11_color_names"><cite>X11 Color Names</cite></a>
		URL: <a
				href="http://en.wikipedia.org/wiki/X11_color_names">http://en.wikipedia.org/wiki/X11_color_names</a>
	</dd>
	<!---->

	<dt id=XML10>[XML10]

	<dd>C. M. Sperberg-McQueen; et al. <a
			href="http://www.w3.org/TR/2008/REC-xml-20081126/"><cite>Extensible
		Markup Language (XML) 1.0 (Fifth Edition).</cite></a> 26 November 2008.
		W3C Recommendation. URL: <a
				href="http://www.w3.org/TR/2008/REC-xml-20081126/">http://www.w3.org/TR/2008/REC-xml-20081126/</a>
	</dd>
	<!---->
</dl>
<!--end-informative-->

<h2 class=no-num id=index>Index</h2>
<!--begin-index-->

<ul class=indexlist>
	<li>ActiveBorder, <a href="#activeborder"
						 title=ActiveBorder><strong>4.5.1.</strong></a>

	<li>ActiveCaption, <a href="#activecaption"
						  title=ActiveCaption><strong>4.5.1.</strong></a>

	<li>aliceblue, <a href="#aliceblue"
					  title=aliceblue><strong>4.3.</strong></a>

	<li>&lt;alphavalue&gt;, <a href="#alphavalue-def"
							   title="&lt;alphavalue&gt;"><strong>3.2.</strong></a>, <a
			href="#ltalphavaluegt" title="&lt;alphavalue&gt;">4.2.2.</a>, <a
			href="#ltalphavaluegt0" title="&lt;alphavalue&gt;">4.2.5.</a>

	<li>antiquewhite, <a href="#antiquewhite"
						 title=antiquewhite><strong>4.3.</strong></a>

	<li>appearance, <a href="#appearance" title=appearance>4.5.1.</a>

	<li>AppWorkspace, <a href="#appworkspace"
						 title=AppWorkspace><strong>4.5.1.</strong></a>

	<li>aqua, <a href="#aqua" title=aqua><strong>4.1.</strong></a>, <a
			href="#aqua0" title=aqua><strong>4.3.</strong></a>

	<li>aquamarine, <a href="#aquamarine"
					   title=aquamarine><strong>4.3.</strong></a>

	<li>azure, <a href="#azure" title=azure><strong>4.3.</strong></a>

	<li>Background, <a href="#background"
					   title=Background><strong>4.5.1.</strong></a>

	<li>beige, <a href="#beige" title=beige><strong>4.3.</strong></a>

	<li>bisque, <a href="#bisque" title=bisque><strong>4.3.</strong></a>

	<li>black, <a href="#black" title=black><strong>4.1.</strong></a>, <a
			href="#black0" title=black><strong>4.3.</strong></a>

	<li>blanchedalmond, <a href="#blanchedalmond"
						   title=blanchedalmond><strong>4.3.</strong></a>

	<li>blue, <a href="#blue" title=blue><strong>4.1.</strong></a>, <a
			href="#blue0" title=blue><strong>4.3.</strong></a>

	<li>blueviolet, <a href="#blueviolet"
					   title=blueviolet><strong>4.3.</strong></a>

	<li>brown, <a href="#brown" title=brown><strong>4.3.</strong></a>

	<li>burlywood, <a href="#burlywood"
					  title=burlywood><strong>4.3.</strong></a>

	<li>ButtonFace, <a href="#buttonface"
					   title=ButtonFace><strong>4.5.1.</strong></a>

	<li>ButtonHighlight, <a href="#buttonhighlight"
							title=ButtonHighlight><strong>4.5.1.</strong></a>

	<li>ButtonShadow, <a href="#buttonshadow"
						 title=ButtonShadow><strong>4.5.1.</strong></a>

	<li>ButtonText, <a href="#buttontext"
					   title=ButtonText><strong>4.5.1.</strong></a>

	<li>cadetblue, <a href="#cadetblue"
					  title=cadetblue><strong>4.3.</strong></a>

	<li>CaptionText, <a href="#captiontext"
						title=CaptionText><strong>4.5.1.</strong></a>

	<li>chartreuse, <a href="#chartreuse"
					   title=chartreuse><strong>4.3.</strong></a>

	<li>chocolate, <a href="#chocolate"
					  title=chocolate><strong>4.3.</strong></a>

	<li>color, <a href="#color0" title=color><strong>3.1.</strong></a>

	<li>&lt;color&gt;, <a href="#ltcolorgt" title="&lt;color&gt;">3.1.</a>, <a
			href="#valuea-def-color" title="&lt;color&gt;"><strong>4.</strong></a>

	<li>color-interpolation, <a href="#color-interpolation"
								title=color-interpolation>5.</a>

	<li>color-rendering, <a href="#color-rendering"
							title=color-rendering>5.</a>

	<li>compositing, <a href="#compositing-def"
						title=compositing><strong>5.</strong></a>

	<li>coral, <a href="#coral" title=coral><strong>4.3.</strong></a>

	<li>cornflowerblue, <a href="#cornflowerblue"
						   title=cornflowerblue><strong>4.3.</strong></a>

	<li>cornsilk, <a href="#cornsilk" title=cornsilk><strong>4.3.</strong></a>


	<li>crimson, <a href="#crimson" title=crimson><strong>4.3.</strong></a>

	<li>currentColor, <a href="#currentColor-def"
						 title=currentColor><strong>4.4.</strong></a>, <a href="#currentcolor0"
																		  title=currentColor>3.1.</a>, <a href="#currentcolor1"
																										  title=currentColor>3.1.</a>, <a href="#currentcolor2"
																																		  title=currentColor>3.1.</a>

	<li>cyan, <a href="#cyan" title=cyan><strong>4.3.</strong></a>

	<li>darkblue, <a href="#darkblue" title=darkblue><strong>4.3.</strong></a>


	<li>darkcyan, <a href="#darkcyan" title=darkcyan><strong>4.3.</strong></a>


	<li>darkgoldenrod, <a href="#darkgoldenrod"
						  title=darkgoldenrod><strong>4.3.</strong></a>

	<li>darkgray, <a href="#darkgray" title=darkgray><strong>4.3.</strong></a>


	<li>darkgreen, <a href="#darkgreen"
					  title=darkgreen><strong>4.3.</strong></a>

	<li>darkgrey, <a href="#darkgrey" title=darkgrey><strong>4.3.</strong></a>


	<li>darkkhaki, <a href="#darkkhaki"
					  title=darkkhaki><strong>4.3.</strong></a>

	<li>darkmagenta, <a href="#darkmagenta"
						title=darkmagenta><strong>4.3.</strong></a>

	<li>darkolivegreen, <a href="#darkolivegreen"
						   title=darkolivegreen><strong>4.3.</strong></a>

	<li>darkorange, <a href="#darkorange"
					   title=darkorange><strong>4.3.</strong></a>

	<li>darkorchid, <a href="#darkorchid"
					   title=darkorchid><strong>4.3.</strong></a>

	<li>darkred, <a href="#darkred" title=darkred><strong>4.3.</strong></a>

	<li>darksalmon, <a href="#darksalmon"
					   title=darksalmon><strong>4.3.</strong></a>

	<li>darkseagreen, <a href="#darkseagreen"
						 title=darkseagreen><strong>4.3.</strong></a>

	<li>darkslateblue, <a href="#darkslateblue"
						  title=darkslateblue><strong>4.3.</strong></a>

	<li>darkslategray, <a href="#darkslategray"
						  title=darkslategray><strong>4.3.</strong></a>

	<li>darkslategrey, <a href="#darkslategrey"
						  title=darkslategrey><strong>4.3.</strong></a>

	<li>darkturquoise, <a href="#darkturquoise"
						  title=darkturquoise><strong>4.3.</strong></a>

	<li>darkviolet, <a href="#darkviolet"
					   title=darkviolet><strong>4.3.</strong></a>

	<li>deeppink, <a href="#deeppink" title=deeppink><strong>4.3.</strong></a>


	<li>deepskyblue, <a href="#deepskyblue"
						title=deepskyblue><strong>4.3.</strong></a>

	<li>dimgray, <a href="#dimgray" title=dimgray><strong>4.3.</strong></a>

	<li>dimgrey, <a href="#dimgrey" title=dimgrey><strong>4.3.</strong></a>

	<li>dodgerblue, <a href="#dodgerblue"
					   title=dodgerblue><strong>4.3.</strong></a>

	<li>firebrick, <a href="#firebrick"
					  title=firebrick><strong>4.3.</strong></a>

	<li>floralwhite, <a href="#floralwhite"
						title=floralwhite><strong>4.3.</strong></a>

	<li>forestgreen, <a href="#forestgreen"
						title=forestgreen><strong>4.3.</strong></a>

	<li>fuchsia, <a href="#fuchsia" title=fuchsia><strong>4.1.</strong></a>,
		<a href="#fuchsia0" title=fuchsia><strong>4.3.</strong></a>

	<li>gainsboro, <a href="#gainsboro"
					  title=gainsboro><strong>4.3.</strong></a>

	<li>ghostwhite, <a href="#ghostwhite"
					   title=ghostwhite><strong>4.3.</strong></a>

	<li>gold, <a href="#gold" title=gold><strong>4.3.</strong></a>

	<li>goldenrod, <a href="#goldenrod"
					  title=goldenrod><strong>4.3.</strong></a>

	<li>gray, <a href="#gray" title=gray><strong>4.1.</strong></a>, <a
			href="#gray0" title=gray><strong>4.3.</strong></a>

	<li>GrayText, <a href="#graytext"
					 title=GrayText><strong>4.5.1.</strong></a>

	<li>green, <a href="#green" title=green><strong>4.1.</strong></a>, <a
			href="#green0" title=green><strong>4.3.</strong></a>

	<li>greenyellow, <a href="#greenyellow"
						title=greenyellow><strong>4.3.</strong></a>

	<li>grey, <a href="#grey" title=grey><strong>4.3.</strong></a>

	<li>Highlight, <a href="#highlight"
					  title=Highlight><strong>4.5.1.</strong></a>

	<li>HighlightText, <a href="#highlighttext"
						  title=HighlightText><strong>4.5.1.</strong></a>

	<li>honeydew, <a href="#honeydew" title=honeydew><strong>4.3.</strong></a>


	<li>hotpink, <a href="#hotpink" title=hotpink><strong>4.3.</strong></a>

	<li>hsl(), <a href="#hsl-def" title="hsl()"><strong>4.2.4.</strong></a>

	<li>hsla(), <a href="#hsla-def" title="hsla()"><strong>4.2.5.</strong></a>


	<li>InactiveBorder, <a href="#inactiveborder"
						   title=InactiveBorder><strong>4.5.1.</strong></a>

	<li>InactiveCaption, <a href="#inactivecaption"
							title=InactiveCaption><strong>4.5.1.</strong></a>

	<li>InactiveCaptionText, <a href="#inactivecaptiontext"
								title=InactiveCaptionText><strong>4.5.1.</strong></a>

	<li>indianred, <a href="#indianred"
					  title=indianred><strong>4.3.</strong></a>

	<li>indigo, <a href="#indigo" title=indigo><strong>4.3.</strong></a>

	<li>InfoBackground, <a href="#infobackground"
						   title=InfoBackground><strong>4.5.1.</strong></a>

	<li>InfoText, <a href="#infotext"
					 title=InfoText><strong>4.5.1.</strong></a>

	<li>ivory, <a href="#ivory" title=ivory><strong>4.3.</strong></a>

	<li>khaki, <a href="#khaki" title=khaki><strong>4.3.</strong></a>

	<li>lavender, <a href="#lavender" title=lavender><strong>4.3.</strong></a>


	<li>lavenderblush, <a href="#lavenderblush"
						  title=lavenderblush><strong>4.3.</strong></a>

	<li>lawngreen, <a href="#lawngreen"
					  title=lawngreen><strong>4.3.</strong></a>

	<li>lemonchiffon, <a href="#lemonchiffon"
						 title=lemonchiffon><strong>4.3.</strong></a>

	<li>lightblue, <a href="#lightblue"
					  title=lightblue><strong>4.3.</strong></a>

	<li>lightcoral, <a href="#lightcoral"
					   title=lightcoral><strong>4.3.</strong></a>

	<li>lightcyan, <a href="#lightcyan"
					  title=lightcyan><strong>4.3.</strong></a>

	<li>lightgoldenrodyellow, <a href="#lightgoldenrodyellow"
								 title=lightgoldenrodyellow><strong>4.3.</strong></a>

	<li>lightgray, <a href="#lightgray"
					  title=lightgray><strong>4.3.</strong></a>

	<li>lightgreen, <a href="#lightgreen"
					   title=lightgreen><strong>4.3.</strong></a>

	<li>lightgrey, <a href="#lightgrey"
					  title=lightgrey><strong>4.3.</strong></a>

	<li>lightpink, <a href="#lightpink"
					  title=lightpink><strong>4.3.</strong></a>

	<li>lightsalmon, <a href="#lightsalmon"
						title=lightsalmon><strong>4.3.</strong></a>

	<li>lightseagreen, <a href="#lightseagreen"
						  title=lightseagreen><strong>4.3.</strong></a>

	<li>lightskyblue, <a href="#lightskyblue"
						 title=lightskyblue><strong>4.3.</strong></a>

	<li>lightslategray, <a href="#lightslategray"
						   title=lightslategray><strong>4.3.</strong></a>

	<li>lightslategrey, <a href="#lightslategrey"
						   title=lightslategrey><strong>4.3.</strong></a>

	<li>lightsteelblue, <a href="#lightsteelblue"
						   title=lightsteelblue><strong>4.3.</strong></a>

	<li>lightyellow, <a href="#lightyellow"
						title=lightyellow><strong>4.3.</strong></a>

	<li>lime, <a href="#lime" title=lime><strong>4.1.</strong></a>, <a
			href="#lime0" title=lime><strong>4.3.</strong></a>

	<li>limegreen, <a href="#limegreen"
					  title=limegreen><strong>4.3.</strong></a>

	<li>linen, <a href="#linen" title=linen><strong>4.3.</strong></a>

	<li>magenta, <a href="#magenta" title=magenta><strong>4.3.</strong></a>

	<li>maroon, <a href="#maroon" title=maroon><strong>4.1.</strong></a>, <a
			href="#maroon0" title=maroon><strong>4.3.</strong></a>

	<li>mediumaquamarine, <a href="#mediumaquamarine"
							 title=mediumaquamarine><strong>4.3.</strong></a>

	<li>mediumblue, <a href="#mediumblue"
					   title=mediumblue><strong>4.3.</strong></a>

	<li>mediumorchid, <a href="#mediumorchid"
						 title=mediumorchid><strong>4.3.</strong></a>

	<li>mediumpurple, <a href="#mediumpurple"
						 title=mediumpurple><strong>4.3.</strong></a>

	<li>mediumseagreen, <a href="#mediumseagreen"
						   title=mediumseagreen><strong>4.3.</strong></a>

	<li>mediumslateblue, <a href="#mediumslateblue"
							title=mediumslateblue><strong>4.3.</strong></a>

	<li>mediumspringgreen, <a href="#mediumspringgreen"
							  title=mediumspringgreen><strong>4.3.</strong></a>

	<li>mediumturquoise, <a href="#mediumturquoise"
							title=mediumturquoise><strong>4.3.</strong></a>

	<li>mediumvioletred, <a href="#mediumvioletred"
							title=mediumvioletred><strong>4.3.</strong></a>

	<li>Menu, <a href="#menu" title=Menu><strong>4.5.1.</strong></a>

	<li>MenuText, <a href="#menutext"
					 title=MenuText><strong>4.5.1.</strong></a>

	<li>midnightblue, <a href="#midnightblue"
						 title=midnightblue><strong>4.3.</strong></a>

	<li>mintcream, <a href="#mintcream"
					  title=mintcream><strong>4.3.</strong></a>

	<li>mistyrose, <a href="#mistyrose"
					  title=mistyrose><strong>4.3.</strong></a>

	<li>moccasin, <a href="#moccasin" title=moccasin><strong>4.3.</strong></a>


	<li>navajowhite, <a href="#navajowhite"
						title=navajowhite><strong>4.3.</strong></a>

	<li>navy, <a href="#navy" title=navy><strong>4.1.</strong></a>, <a
			href="#navy0" title=navy><strong>4.3.</strong></a>

	<li>oldlace, <a href="#oldlace" title=oldlace><strong>4.3.</strong></a>

	<li>olive, <a href="#olive" title=olive><strong>4.1.</strong></a>, <a
			href="#olive0" title=olive><strong>4.3.</strong></a>

	<li>olivedrab, <a href="#olivedrab"
					  title=olivedrab><strong>4.3.</strong></a>

	<li>opacity, <a href="#opacity" title=opacity><strong>3.2.</strong></a>

	<li>orange, <a href="#orange" title=orange><strong>4.3.</strong></a>

	<li>orangered, <a href="#orangered"
					  title=orangered><strong>4.3.</strong></a>

	<li>orchid, <a href="#orchid" title=orchid><strong>4.3.</strong></a>

	<li>palegoldenrod, <a href="#palegoldenrod"
						  title=palegoldenrod><strong>4.3.</strong></a>

	<li>palegreen, <a href="#palegreen"
					  title=palegreen><strong>4.3.</strong></a>

	<li>paleturquoise, <a href="#paleturquoise"
						  title=paleturquoise><strong>4.3.</strong></a>

	<li>palevioletred, <a href="#palevioletred"
						  title=palevioletred><strong>4.3.</strong></a>

	<li>papayawhip, <a href="#papayawhip"
					   title=papayawhip><strong>4.3.</strong></a>

	<li>peachpuff, <a href="#peachpuff"
					  title=peachpuff><strong>4.3.</strong></a>

	<li>peru, <a href="#peru" title=peru><strong>4.3.</strong></a>

	<li>pink, <a href="#pink" title=pink><strong>4.3.</strong></a>

	<li>plum, <a href="#plum" title=plum><strong>4.3.</strong></a>

	<li>powderblue, <a href="#powderblue"
					   title=powderblue><strong>4.3.</strong></a>

	<li>purple, <a href="#purple" title=purple><strong>4.1.</strong></a>, <a
			href="#purple0" title=purple><strong>4.3.</strong></a>

	<li>red, <a href="#red" title=red><strong>4.1.</strong></a>, <a
			href="#red0" title=red><strong>4.3.</strong></a>

	<li>#rgb, <a href="#rgb" title="#rgb"><strong>4.2.1.</strong></a>

	<li>rgb(), <a href="#rgb-def" title="rgb()"><strong>4.2.1.</strong></a>

	<li>rgba(), <a href="#rgba-def" title="rgba()"><strong>4.2.2.</strong></a>


	<li>rosybrown, <a href="#rosybrown"
					  title=rosybrown><strong>4.3.</strong></a>

	<li>royalblue, <a href="#royalblue"
					  title=royalblue><strong>4.3.</strong></a>

	<li>#rrggbb, <a href="#rrggbb" title="#rrggbb"><strong>4.2.1.</strong></a>


	<li>saddlebrown, <a href="#saddlebrown"
						title=saddlebrown><strong>4.3.</strong></a>

	<li>salmon, <a href="#salmon" title=salmon><strong>4.3.</strong></a>

	<li>sandybrown, <a href="#sandybrown"
					   title=sandybrown><strong>4.3.</strong></a>

	<li>Scrollbar, <a href="#scrollbar"
					  title=Scrollbar><strong>4.5.1.</strong></a>

	<li>seagreen, <a href="#seagreen" title=seagreen><strong>4.3.</strong></a>


	<li>seashell, <a href="#seashell" title=seashell><strong>4.3.</strong></a>


	<li>sienna, <a href="#sienna" title=sienna><strong>4.3.</strong></a>

	<li>silver, <a href="#silver" title=silver><strong>4.1.</strong></a>, <a
			href="#silver0" title=silver><strong>4.3.</strong></a>

	<li>skyblue, <a href="#skyblue" title=skyblue><strong>4.3.</strong></a>

	<li>slateblue, <a href="#slateblue"
					  title=slateblue><strong>4.3.</strong></a>

	<li>slategray, <a href="#slategray"
					  title=slategray><strong>4.3.</strong></a>

	<li>slategrey, <a href="#slategrey"
					  title=slategrey><strong>4.3.</strong></a>

	<li>snow, <a href="#snow" title=snow><strong>4.3.</strong></a>

	<li>springgreen, <a href="#springgreen"
						title=springgreen><strong>4.3.</strong></a>

	<li>sRGB, <a href="#sRGB-def" title=sRGB><strong>4.2.1.</strong></a>, <a
			href="#SRGB" title=sRGB>4.1.</a>

	<li>steelblue, <a href="#steelblue"
					  title=steelblue><strong>4.3.</strong></a>

	<li>system colors, <a href="#system-colors-def" title="system
    colors"><strong>4.5.1.</strong></a>

	<li>tan, <a href="#tan" title=tan><strong>4.3.</strong></a>

	<li>teal, <a href="#teal" title=teal><strong>4.1.</strong></a>, <a
			href="#teal0" title=teal><strong>4.3.</strong></a>

	<li>thistle, <a href="#thistle" title=thistle><strong>4.3.</strong></a>

	<li>ThreeDDarkShadow, <a href="#threeddarkshadow"
							 title=ThreeDDarkShadow><strong>4.5.1.</strong></a>

	<li>ThreeDFace, <a href="#threedface"
					   title=ThreeDFace><strong>4.5.1.</strong></a>

	<li>ThreeDHighlight, <a href="#threedhighlight"
							title=ThreeDHighlight><strong>4.5.1.</strong></a>

	<li>ThreeDLightShadow, <a href="#threedlightshadow"
							  title=ThreeDLightShadow><strong>4.5.1.</strong></a>

	<li>ThreeDShadow, <a href="#threedshadow"
						 title=ThreeDShadow><strong>4.5.1.</strong></a>

	<li>tomato, <a href="#tomato" title=tomato><strong>4.3.</strong></a>

	<li>transparent, <a href="#transparent-def"
						title=transparent><strong>4.2.3.</strong></a>, <a href="#transparent0"
																		  title=transparent>3.1.</a>

	<li>turquoise, <a href="#turquoise"
					  title=turquoise><strong>4.3.</strong></a>

	<li>violet, <a href="#violet" title=violet><strong>4.3.</strong></a>

	<li>wheat, <a href="#wheat" title=wheat><strong>4.3.</strong></a>

	<li>white, <a href="#white" title=white><strong>4.1.</strong></a>, <a
			href="#white0" title=white><strong>4.3.</strong></a>

	<li>whitesmoke, <a href="#whitesmoke"
					   title=whitesmoke><strong>4.3.</strong></a>

	<li>Window, <a href="#window" title=Window><strong>4.5.1.</strong></a>

	<li>WindowFrame, <a href="#windowframe"
						title=WindowFrame><strong>4.5.1.</strong></a>

	<li>WindowText, <a href="#windowtext"
					   title=WindowText><strong>4.5.1.</strong></a>

	<li>yellow, <a href="#yellow" title=yellow><strong>4.1.</strong></a>, <a
			href="#yellow0" title=yellow><strong>4.3.</strong></a>

	<li>yellowgreen, <a href="#yellowgreen"
						title=yellowgreen><strong>4.3.</strong></a>
</ul>
<!--end-index-->

<h2 class=no-num id=property>Property index</h2>
<!--begin-properties-->

<table class=proptable>
	<thead>
	<tr>
		<th>Property

		<th>Values

		<th>Initial

		<th>Applies&nbsp;to

		<th>Inh.

		<th>Percentages

		<th>Media

			<tbody>
	<tr valign=baseline>
		<td><a class=property href="#color0">color</a>

		<td>&lt;color&gt; | inherit

		<td>depends on user agent

		<td>all elements

		<td>yes

		<td>N/A

		<td>visual

	<tr valign=baseline>
		<td><a class=property href="#opacity">opacity</a>

		<td>&lt;alphavalue&gt; | inherit

		<td>1

		<td>all elements

		<td>no

		<td>N/A

		<td>visual
</table>
<!--end-properties-->
</html>
<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-declaration:"~/SGML/HTML4.decl"
sgml-default-doctype-name:"html"
sgml-minimize-attributes:t
sgml-nofill-elements:("pre" "style" "br")
sgml-live-element-indicator:t
End:
-->
